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

Radio Button (ラジオボタン)

Ignite UI for Angular 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';
// 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 { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular';
// import { IgxRadioComponent, IgxRadioGroupDirective } 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: [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 リストに追加する必要があります。

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

スタイル設定

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

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

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

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

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

CSS 変数の使用

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

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

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

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

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

:host {
     ::ng-deep {
        @include 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';
// 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";
...
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 リファレンス

テーマの依存関係

IgxRipple テーマ

その他のリソース

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

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

Radio Button (ラジオ ボタン)