Switch

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

    Angular Switch の例

    使用方法

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

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

    // app.module.ts

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

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

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

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

    テーマの依存関係

    その他のリソース

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