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 が設定されていない場合、ラベルはスイッチの後に配置されます。

    スタイル設定

    最も簡単な方法は、CSS 変数を使用してスイッチの外観をカスタマイズする方法です。

    igx-switch {
    --thumb-on-color: #e3f0ff;
    --thumb-off-color: #fff;
    --track-on-color: #0064d9;
    --track-off-color: #788fa6;
    --track-on-hover-color: #0058bf;
    --border-radius-track: 1rem;
    --focus-outline-color: #0032a5;
    --border-on-color: transparent;
    --border-color: transparent;
}

igx-switch:hover {
    --track-off-color: #637d97;
}

    これらの CSS 変数の値を変更することで、スイッチ コンポーネントの全体的な外観を変更できます。

    スイッチにスタイルを設定する別の方法は、Sass と switch-theme 関数を使用することです。

    Sass を使用してスイッチのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む index ファイルをインポートします。

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

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

    次に、switch-theme を拡張して新しいテーマを作成します。$thumb-off-color と $thumb-on-color の 2 つのパラメーターを指定するだけで、完全なスタイルのスイッチが生成されます。その他のパラメーターをオーバーライドして、外観をさらにカスタマイズすることも可能です。

    $custom-switch-theme: switch-theme(
    $thumb-off-color: #7cadd5,
    $thumb-on-color: #ecaa53,
);

    最後に、カスタム テーマをアプリケーションに含めます。

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

    以下のサンプルでは、カスタマイズした CSS 変数を使用したスイッチ コンポーネントが、SAP UI5 デザイン システムのスイッチに視覚的に似たデザインを実現している様子を確認できます。

    Note

    サンプルでは、Fluent Light スキーマを使用します。

    API リファレンス

    テーマの依存関係

    その他のリソース

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