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

スタイル設定

Switch テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。

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

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

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

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

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

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

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

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

In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the SAP UI5 design system.

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず Tailwind を設定してください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します (例: light-switch、dark-switch)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、IgxSwitch テーマ で確認できます。構文は次のとおりです:

<igx-switch
  class="!light-switch ![--thumb-on-color:#FF4E00]"
  [checked]="true">
  ...
</igx-switch>

最終的に、switch は次のようになります:

API リファレンス

• Switch
• IgxSwitchComponent スタイル

テーマの依存関係

• IgxRipple テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)