Angular Radio & Radio Group (ラジオ & ラジオ グループ) コンポーネントの概要

Radio Button (ラジオ ボタン)

Angular Radio & Radio Group の例

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 については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxRadioModule をインポートします。

// 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 Radio Button モジュールまたはディレクティブをインポートしたので、igx-radio-group ディレクティブと igx-radio コンポーネントの使用を開始できます。

Angular Radio Button の使用

ラジオ ボタンを表示するには、コンポーネントのテンプレートで以下のコードを追加します。

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

ラベル

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>

プロパティ

上記のサンプルに 4 つのラジオ ボタンを追加し、各ボタンに特定の背景の色を適用します。次に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドします。selectedColor は NgModel ディレクティブによって双方向バインディングが設定されるため、ユーザーが別のラジオ ボタン (色) を選択する際に値が更新されます。

// 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 の imports リストに追加する必要があります。

結果は以下のようになります。

スタイル設定

Radio テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。

ラジオ ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最もシンプルな方法として、radio-theme を拡張する新しいテーマを作成します。$empty-color と $fill-color の 2 つの主要パラメーターを指定することで、完全なスタイルのラジオ ボタンを生成できます。これらの値はテーマの基盤となり、指定することでホバー、選択、無効など、さまざまな状態に必要な前景の色および背景の色が自動的に計算されます。

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

最後に、カスタム テーマをアプリケーションに含めます。

:host {
  @include tokens($custom-radio-theme);
}

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して radio button をスタイル設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

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

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-radio、dark-radio)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、radio-theme で確認できます。構文は次のとおりです:

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

最終的に、radio button は次のようになります:

Radio Group

デモ

使用方法

Radio Group ディレクティブが NgModule としてエクスポートされるため、アプリケーションで app.module.ts ファイルの IgxRadioModule をインポートする必要があります。

// 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 入力プロパティを使用して、ラジオ グループ内の igxRadio コンポーネントの方向を変更します。horizontal および vertical から選択できます。ラジオ グループのデフォルト配置は horizontal (水平) です。

//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 リファレンス

• IgxRadioGroupDirective
• Radio
• IgxRadioComponent スタイル

テーマの依存関係

• IgxRipple テーマ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)