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 リファレンス
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。