Radio & Radio Group

    Radio Button

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

    Angular Radio & Radio Group の例

    使用方法

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

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

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

    スタイル設定

    ラジオ ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する 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);
        }
    }
    

    Radio Group

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

    デモ

    使用方法

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

    配置

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

    テーマの依存関係

    その他のリソース

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