Angular Switch (スイッチ) コンポーネントの概要

    Ignite UI for Angular Switch コンポーネントは iOS の switch コンポーネントと同様に動作するバイナリ選択コンポーネントです。

    Angular Switch の例

    Ignite UI for Angular Switch を使用した作業の開始

    Ignite UI for Angular Switch コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular

    Ignite UI for Angular については、「はじめに」トピックをご覧ください。

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

    // app.module.ts

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

@NgModule({
    ...
    imports: [..., IgxSwitchModule],
    ...
})
export class AppModule {}

    あるいは、16.0.0 以降、IgxSwitchComponent をスタンドアロンの依存関係としてインポートできます。

    // home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-switch [checked]="true">
        Simple switch
    </igx-switch>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxSwitchComponent]
})
export class HomeComponent {}

    Ignite UI for Angular Switch モジュールまたはコンポーネントをインポートしたので、igx-switch コンポーネントの使用を開始できます。

    Angular Switch の使用

    中核となるスイッチ コンポーネントはオン/オフ状態の切り替えが可能です。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

    デモのようにシンプルなスイッチを作成するには、コンポーネントのテンプレートに以下のコードを追加します。

    <igx-switch [checked]="true">
    Simple switch
</igx-switch>

    Switch プロパティ

    上記のコードを拡張するには、スイッチ プロパティをデータにバインドします。name および state の 2 つのプロパティを持つ設定オブジェクトの配列があるとしましょう。スイッチ コンポーネントの checked プロパティを基礎となるオブジェクトの state プロパティにバインドします。同じように、value プロパティを name にバインドします。

    // toggle.component.ts
...
public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
];

    コンポーネント テンプレートに各設定のためのスイッチを追加し、相対するプロパティにバインドします。

    <!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
    {{ setting.name }}
</igx-switch>

    スタイルを追加します。

    :host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-switch {
    margin-top: 24px;
}

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

    ラベル位置

    スイッチの labelPosition プロパティを使用してラベルを配置できます。

    <igx-switch labelPosition="before"></igx-switch>

    labelPosition が設定されていない場合、ラベルはスイッチの後に配置されます。

    スタイル設定

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

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

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

    次に、switch-theme を拡張する新しいテーマを作成し、そのパラメーターを使用してスイッチの項目をスタイル設定します。

    // in styles.scss
$custom-switch-theme: switch-theme(
    $thumb-on-color: #ECAA53,
    $track-on-color: #F0CB9C
);

    テーマを含む

    最後にコンポーネントのテーマをアプリケーションに含めます。

    $legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

     @include switch($custom-switch-theme);
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

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

    $legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

    @include css-vars($custom-switch-theme);
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

    :host {
    @include css-vars($custom-switch-theme);
}

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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