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 が設定されていない場合、ラベルはスイッチの後に配置されます。
スタイル設定
Switch テーマのプロパティ マップ
プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$track-off-color |
$thumb-off-color | スイッチがオフの時のつまみの色 |
| $track-disabled-color | スイッチが無効の時のトラックの色 | |
$thumb-off-color |
$track-off-color | スイッチがオフの時のトラックの色 |
| $thumb-disabled-color | スイッチが無効の時のつまみの色 | |
$track-on-color |
$thumb-on-color | スイッチがオンの時のつまみの色 |
| $track-on-hover-color | ホバー時のスイッチのオンの時のトラックの色 | |
| $track-on-disabled-color | スイッチがオンおよび無効の時のトラックの色 | |
$thumb-on-color |
$track-on-color | スイッチがオンの時のトラックの色 |
| $thumb-on-disabled-color | スイッチがオンかつ無効の時のつまみの色 |
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$thumb-off-color |
$border-color | つまみのオフ色に由来する境界線の色 |
| $thumb-off-hover-color | ホバー時のスイッチのつまみの色 | |
$border-color |
$thumb-off-color | 境界線の色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $border-disabled-color | 無効なスイッチの境界線の色 | |
$track-off-color |
$thumb-off-color | トラックのオフ色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $track-disabled-color | 無効なスイッチのトラックの色 | |
$track-on-color |
$thumb-on-color | スイッチがオンの時のつまみの色 |
| $thumb-on-disabled-color | 無効なスイッチのオンの時のつまみの色 | |
| $border-on-color | スイッチがオンの時の境界線の色 | |
| $border-on-hover-color | ホバー時のスイッチのオンの時の境界線の色 | |
| $track-on-hover-color | ホバー時のスイッチのオンの時のトラックの色 | |
| $track-on-disabled-color | オンかつ無効の時のトラックの色 |
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$thumb-off-color |
$border-color | つまみのオフ色に由来する境界線の色 |
| $thumb-off-hover-color | ホバー時のスイッチのつまみの色 | |
$border-color |
$thumb-off-color | 境界線の色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $border-disabled-color | 無効なスイッチの境界線の色 | |
$track-off-color |
$thumb-off-color | トラックのオフ色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $track-disabled-color | 無効なスイッチのトラックの色 | |
$track-on-color |
$thumb-on-color | スイッチがオンの時のつまみの色 |
| $thumb-on-disabled-color | 無効なスイッチのオンの時のつまみの色 | |
| $border-on-color | スイッチがオンの時の境界線の色 | |
| $border-on-hover-color | ホバー時のスイッチのオンの時の境界線の色 | |
| $track-on-hover-color | ホバー時のスイッチのオンの時のトラックの色 | |
| $track-on-disabled-color | オンかつ無効の時のトラックの色 | |
| $focus-fill-color | フォーカス時のスイッチの塗りつぶし色 | |
$focus-fill-color |
$focus-outline-color | フォーカス時の塗りつぶし色に由来するアウトラインの色 |
| $focus-fill-hover-color | ホバー時のスイッチのフォーカス時の塗りつぶし色 |
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$thumb-off-color |
$border-color | つまみのオフ色に由来する境界線の色 |
| $thumb-off-hover-color | ホバー時のスイッチのつまみの色 | |
$border-color |
$thumb-off-color | 境界線の色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $border-disabled-color | 無効なスイッチの境界線の色 | |
$track-off-color |
$thumb-off-color | トラックのオフ色に由来するつまみのオフ色 |
| $border-hover-color | ホバー時のスイッチの境界線の色 | |
| $track-disabled-color | 無効なスイッチのトラックの色 | |
$track-on-color |
$thumb-on-color | スイッチがオンの時のつまみの色 |
| $thumb-on-disabled-color | 無効なスイッチのオンの時のつまみの色 | |
| $border-on-color | スイッチがオンの時の境界線の色 | |
| $track-on-hover-color | ホバー時のスイッチのオンの時のトラックの色 | |
| $track-on-disabled-color | オンかつ無効の時のトラックの色 | |
$border-on-color |
$border-on-hover-color | ホバー時のスイッチのオンの時の境界線の色 |
| $focus-outlined-color-focused | フォーカス時のスイッチのフォーカスアウトラインの色 |
スイッチのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する 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 デザイン システムのスイッチに視覚的に似たデザインを実現している様子を確認できます。
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>
Note
ユーティリティ クラスが優先されるようにするには、感嘆符 (!) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
最終的に、switch は次のようになります:
API リファレンス
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub