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에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxRadioModule in the app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxRadioGroupDirective and IgxRadioComponent as standalone dependencies, or use the IGX_RADIO_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// 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;
}

Now that you have the Ignite UI for Angular Radio Button module or directives imported, you can start using the igx-radio-group directive and igx-radio component.

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

The labelPosition property can be used to change the default position of the label in the radio component. Users can choose between before and after. If not specified, the label will be placed after the radio button.

<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

Let's enhance the previous sample by adding four radio buttons, each responsible for applying a certain color as a background. We will bind the backgroundColor property of a div element to the component's selectedColor property. You will notice that selectedColor also participates in a two way binding relation through the NgModel directive, therefore its value is updated each time the user selects a different radio button (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>

Pay attention that if you don't use the NgModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list.

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

스타일링

Radio Theme Property Map

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

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

To get started with styling the radio buttons, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the radio-theme. By providing just two key parameters — $empty-color and $fill-color — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled).

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

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

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

Note

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

Styling with Tailwind

You can style the radio button using our custom Tailwind utility classes. Make sure to set up Tailwind first.

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

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

The utility file includes both light and dark theme variants.

Use light-* classes for the light theme.
Use dark-* classes for the dark theme.
Append the component name after the prefix, e.g., light-radio, dark-radio.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

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

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

Note

The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

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

Radio Group

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

Demo

Usage

The Radio Group Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRadioModule in the app.module.ts file:

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

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

To get started, create an igxRadioGroup and add several igxRadio components.

Note that, setting a name property for the radio group is mandatory.

<!--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

Use the alignment input property to change the orientation of the igxRadio components in the radio group. Users can choose between horizontal and vertical. By default the radio group alignment is horizontal.

//sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
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

IgxRipple 테마

Additional Resources

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