Angular Radio 및 Radio Group 구성 요소 개요

    Radio Button

    Ignite UI for Angular 사용하면 사용자는 나란히 나열된 사용 가능한 옵션 세트에서 단일 옵션을 선택할 수 있습니다.

    Angular Radio & Radio Group Example

    Getting Started with Ignite UI for Angular Radio Button

    Ignite UI for Angular Radio Button 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 다음 단계를 가져오는 것입니다.IgxRadioModule 안에 app.module.ts 파일.

    // app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
export class AppModule {
    public selected: any;
}

    또는16.0.0 현재로서는 와IgxRadioGroupDirective를 독립 실행형 의존성으로 가져오IgxRadioComponent 거나, 토큰을IGX_RADIO_GROUP_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular/radio';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-radio-group>
      <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
      <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
  public selected: any;
}

    이제 Ignite UI for Angular 라디오 버튼 모듈이나 디렉티브를 가져왔으니, 디렉티브와igx-radio-group 컴포넌트를 사용할igx-radio 수 있습니다.

    Using the Angular Radio Button

    구성요소 템플릿 내에서 다음 코드를 사용하여 라디오 버튼을 표시할 수 있습니다.

    <igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>

    Label

    이 속성은labelPosition 라디오 컴포넌트 내 라벨의 기본 위치를 변경하는 데 사용할 수 있습니다. 사용자는 와before 중에서after 선택할 수 있습니다. 명시되지 않은 경우, 라벨은 라디오 버튼 뒤에 배치됩니다.

    <igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>

    Properties

    이전 샘플을 강화해 네 개의 라디오 버튼을 추가해 각 버튼을 배경으로 특정 색상을 적용해 보겠습니다. div 요소의 backgroundColor 속성을 컴포넌트의 selectedColor 속성에 결합할 것입니다. selectColor는 지시를 통해NgModel 양방향 결합 관계에도 참여하므로, 사용자가 다른 라디오 버튼(color)을 선택할 때마다 값이 갱신됩니다.

    // radiogroup.component.ts
...
public colors = [{
    hex: '#f06a2f',
    name: 'Carrot'
}, {
    hex: '#ff134a',
    name: 'Watermelon'
}, {
    hex: '#7bc96f',
    name: 'Grass'
},
{
    hex: 'transparent',
    name: 'No color'
}];

public selectedColor: string = this.colors[3].hex;

    <!--radiogroup.component.html-->
<igx-radio *ngFor="let color of colors" name="color" [value]="color.hex" [(ngModel)]="selectedColor">
  {{color.name}}
</igx-radio>

<div [style.background-color]="selectedColor">...</div>

    만약 양방향 데이터 바인딩에서 지시문을 사용하지NgModel 않는다면, 반FormsModule 드시 NgModule의 가져오기 목록에 추가해야 한다는 점을 유의하세요.

    최종 결과는 다음과 같습니다.

    스타일링

    Radio Theme Property Map

    기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

    기본 속성 종속 속성 설명
    $empty색
    		 $hover색 호버링 시 테두리와 점 색상
    $focus 윤곽선 색상 (인디고)포커스 윤곽선 색상 (인디고 테마)
    $fill색
    		 $fill색 호버 호버링 시 점의 색깔 체크
    $fill-호버-테두리 색상 (부트스트랩 아닌)호버링 시 테두리 색상 체크
    $focus-테두리 색상 (부트스트랩)초점 테두리 색상
    $focus-윤곽 색상 (부트스트랩)초점 윤곽 색깔
    $focus 윤곽선-색상 채우기 (인디고)라디오가 채워질 때 초점 윤곽선 색상
    $label색 $label색 호버 호버링 시 라벨 텍스트 색상
    $error색
    		 $error색 호버 호버 상태에서 라벨, 테두리, 점 색상이 유효하지 않음
    $focus-아웃라인-색상-오류포커스 아웃라인 색상 상태가 유효하지 않음

    라디오 버튼 스타일링을 시작하려면, 모든 테마 기능과 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    가장 간단한 접근법을 따르면, 우리는 새로운radio-theme 주제를 만들어 확장합니다. 두 가지 핵심 매개변수$empty-color​$fill-color만 제공하면 완전히 스타일링된 라디오 버튼을 생성할 수 있습니다. 이 값들은 테마의 기초가 되며, 제공함으로써 다양한 상태(예: 호버, 선택, 비활성화)에 필요한 전경 및 배경 색상을 자동으로 계산합니다.

    $custom-radio-theme: radio-theme(
    $empty-color:  #345779,
    $fill-color: #2dabe8,
);

    마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.

    @include css-vars($custom-radio-theme);

    Note

    이 샘플에서는 Fluent Light 스키마를 사용합니다.

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일radio button 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-radio​dark-radio 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 라디오 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-radio
class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
...
>
  New York
</igx-radio>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 라디오 버튼은 다음과 같이 보여야 합니다:

    Radio Group

    Ignite UI for Angular 자식 라디오 구성 요소를 더 잘 제어할 수 있는 그룹화 컨테이너를 제공하고 템플릿 기반 및 반응형 양식을 지원합니다.

    Demo

    Usage

    라디오 그룹 지침은 다음과 같이 수출됩니다.NgModule 따라서 애플리케이션에서 해야 할 일은 다음만 가져오는 것입니다.IgxRadioModule 안에 app.module.ts 파일:

    // app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})

    시작하려면 여러igxRadioGroup 구성 요소를 만들고 추가igxRadio 하세요.

    라디오 그룹에 속성 설정name이 필수 임을 유의하세요.

    <!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
  <igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
    {{fruit}}
  </igx-radio>
</igx-radio-group>

    // radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];

    Alignment

    입력 속성을 사용하여alignment 라디오 그룹 내 부품의igxRadio 방향을 변경하세요. 사용자는 와horizontal 중에서vertical 선택할 수 있습니다. 기본적으로 무선 그룹 정렬은 수평입니다.

    //sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular/radio";
...
public alignment = RadioGroupAlignment.vertical;
...

    <!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
  <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>

    API References

    Theming Dependencies

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.