Radio & Radio Group

Radio Button

Ignite UI for Angular Radio Button コンポーネントを使用すると、隣に表示されるオプションのセットから単一のオプションを選択する機能を提供します。

Angular Radio & Radio Group の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 StackBlitz で表示

使用方法

Radio Button コンポーネントを初期化にするには、まず IgxRadioModule を AppModule ファイルにインポートします。

// app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular';

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

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

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

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

codesandbox で表示 StackBlitz で表示

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-radio-theme を拡張する新しいテーマを作成し、デフォルト テーマのいくつかのパラメーターを受け取る方法です。

$custom-radio-theme: igx-radio-theme(
    $disabled-color: lightgray,
    $empty-color:  #345779,
    $fill-color: #2dabe8,
    $fill-color-hover: #2dabe8,
    $fill-hover-border-color: #2dabe8
);

CSS 変数の使用

最後には、カスタム ラジオ テーマをアプリケーションに渡します。

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

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
     ::ng-deep {
        @include igx-radio($custom-radio-theme);
    }
}

codesandbox で表示 StackBlitz で表示

Radio Group

Ignite UI for Angular Radio Group ディレクティブは、ラジオの子コンポーネントを制御できるグループ化コンテナーを提供し、テンプレート駆動型およびリアクティブ型のフォームをサポートします。

デモ

codesandbox で表示 StackBlitz で表示

使用方法

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

// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';

@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"];

API リファレンス

• IgxRadioGroupDirective
• IgxRadioComponent
• IgxRadioComponent スタイル

その他のリソース

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

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