Web Components Switch (スイッチ)

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

Web Components Switch の例

使用方法

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

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

次に、以下のように、Switch と必要な CSS をインポートする必要があります:

import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

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

<igc-switch></igc-switch>

例

ラベル

スイッチに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<igc-switch>Label</igc-switch>

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

<igc-switch label-position="before">Label</igc-switch>

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

<span id="switch-label">Label</span>
<igc-switch aria-labelledby="switch-label"></igc-switch>

チェック済み

スイッチをオンに切り替えるには、checked 属性を使用できます。

<igc-switch checked></igc-switch>

必須

required 属性を使用して、スイッチを必須としてマークできます。

<igc-switch required></igc-switch>

無効

invalid 属性を使用して、スイッチを無効としてマークできます。

<igc-switch invalid></igc-switch>

オフ

スイッチをオフにするには、disabled 属性を使用できます。

<igc-switch disabled></igc-switch>

フォーム

Form でスイッチを使用する場合は、name と value の属性を使用できます。

<igc-switch name="wifi" value="enabled"></igc-switch>

スタイル設定

Switch コンポーネントは、いくつかの CSS パーツを公開して、スタイルを完全に制御できるようにします。

  igc-switch {
    --thumb-on-color: white;
    --thumb-off-color: var(--ig-success-500);
    --track-on-color: var(--ig-success-500); /* Background color when checked */
    --track-off-color: white; /* Background color when unchecked */
    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
  }

API リファレンス

その他のリソース

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