Switch コンポーネント

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

ライブ デモ

構造

Angular Switch には、バイナリ状態を変更するコントロールと、オプションのラベルが含まれています。

以下の図は、Angular Switch の論理構造を示しています。コントロールはバイナリ状態を管理し、オプションのラベルはスイッチによって制御される設定を説明します。

Switch
├── Control
└── Label (optional)

作業の開始

Angular Switch を使用するには、基本的なプロジェクト設定について Ignite UI for Angular の作業の開始 トピックに従ってから、ターゲット プラットフォーム用にコンポーネントを登録します。

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

igniteui-angular パッケージを使用する Angular では、パッケージをインストールします。

npm install igniteui-angular

次に、IgxSwitchComponent をインポートします。

import { IgxSwitchComponent } from 'igniteui-angular/switch';

Switch の使用を開始する最も簡単な方法は次のとおりです。

<igx-switch [checked]="true">Simple switch</igx-switch>

使用方法

Angular Switch は、ユーザーが状態を変更するとすぐに反映される設定用のバイナリ選択コントロールとして使用します。

以下の例は、基本的な Switch の構成を示しています。スイッチに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<igx-switch>Accept terms</igx-switch>

required プロパティを使用して、スイッチを必須としてマークできます。

<igx-switch [required]="true">Label</igx-switch>

invalid プロパティを使用して、スイッチを無効としてマークできます。

<igx-switch [invalid]="true">Label</igx-switch>

インタラクション状態

Switch は Enabled または Disabled 状態で挿入できます。Enabled 状態では、スイッチは Hover、Focused、および Focused & Hover の状態もサポートします。

無効状態

スイッチの状態を Disabled に設定して、ユーザーの操作を許可しないようにすることもできます。この状態を設定するには、disabled 属性を使用できます。

<igx-switch [disabled]="true">Label</igx-switch>

オン/オフ状態

Switch は On または Off の状態に設定して、設定が有効か無効かを示すことができます。

<igx-switch [checked]="true">On</igx-switch>
<igx-switch [checked]="false">Off</igx-switch>

レイアウト

スイッチの LabelPosition プロパティを設定することにより、スイッチの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。

<igx-switch labelPosition="before">Label</igx-switch>

スイッチには、スイッチの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

使用すべき場合と使用すべきでない場合

使用する場合: ユーザーが変更するとすぐに反映されるオン/オフの設定には Switch を使用します。

使用しない場合: ユーザーが後でフォームを送信するために 1 つ以上のオプションを選択する場合は Checkbox を使用し、コントロールがアクションまたは切り替え可能なコマンドを表す場合は Button を使用します。

Do	Don’t

プロパティ

スタイル設定

Angular Switch は、CSS パーツと CSS 変数を使用して、トラック、つまみ、およびラベルのスタイルを設定します。

Sass テーマ設定

スイッチのスタイル設定を開始するには、すべてのテーマ関数と tokens() ミックスインがエクスポートされる index ファイルをインポートします。

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

次に、switch-theme を拡張する新しいテーマを作成します。$thumb-off-color と $thumb-on-color を指定するだけで、テーマがそれらから残りの色を生成するため、完全にスタイル設定されたスイッチを取得できます。

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

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

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

Tailwind でのスタイル設定

Ignite UI Tailwind ユーティリティ クラスを使用してスイッチのスタイルを設定できます。まず Tailwind をセットアップ してから、グローバル スタイルシートにユーティリティ ファイルをインポートします。

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

対応するテーマには light-switch または dark-switch を使用し、任意のプロパティで生成された CSS 変数をオーバーライドします。プロパティの完全な一覧は、IgxSwitch Theme を参照してください。

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

感嘆符 (!) は、コンポーネントのテーマよりも優先されるようにユーティリティ クラスを重要にします。

アクセシビリティ

Angular Switch はバイナリ状態を公開し、そのラベルまたは ARIA 属性を通じてアクセシブルな名前をサポートします。

キーボード操作

スクリーン リーダー/ARIA

Switch は、バイナリのチェック状態を持つインタラクティブなコントロールをレンダリングします。表示されるラベル コンテンツ、または aria-label や aria-labelledby によるアクセシブルな名前を用意し、ラベルはスイッチが制御する設定に固有のものにしてください。

アクセシビリティ コンプライアンス

Infragistics は、Section 508 および WCAG 2.1 ガイドライン領域に対する Ignite UI for Angular のアクセシビリティ サポートを アクセシビリティ コンプライアンス トピックで説明しています。

トラブルシューティング

このセクションを使用して、Switch をフォーム フィールド、インタラクティブなコマンド、または設定コントロールとして扱う前に、境界と一般的な決定事項を確認してください。

Switch がフォームで送信されないのはなぜですか?

Switch はフォームに関連付けられますが、フォームが送信されたときに値を提供するには name と value が必要です。両方のプロパティを設定し、対象プラットフォームでサポートされているフォーム統合を使用してください。

スクリーン リーダーで Switch が正しく読み上げられないのはなぜですか?

Switch にはアクセシブルな名前が必要です。表示されるラベル コンテンツを追加するか、aria-labelledby で外部ラベルを参照してください。表示テキストが利用できない場合は aria-label を使用してください。

既知の制限事項

Angular Switch には、プラットフォームに依存しない以下の制限事項があります。

• Switch は 1 つのバイナリ設定を表します。ユーザーが複数の選択肢または後から行うフォーム選択を必要とする場合は、別のコントロールを使用してください。
• Switch にラベルまたは ARIA 命名属性がない場合、アクセシブルな名前は自動的には提供されません。

API リファレンス

Angular Switch の完全な API リファレンスを参照してください。

依存関係

Angular Switch は、視覚的なスタイルを適用するためにテーマ スタイルシートを必要とします。フレームワーク固有のセットアップについては、作業の開始 を参照してください。

その他のリソース

API の詳細、例、およびプロジェクトのサポートについては、以下の Angular リソースを使用してください。

• Lists - Design System Pattern
• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)

関連コンポーネント

• Checkbox - ユーザーが 1 つ以上のオプションを選択する場合、特にフォームの一部として使用する場合は Checkbox を使用します。

• Button - コントロールが設定ではなくコマンドまたはアクションを表す場合は Button を使用します。

FAQ