Web Components Switch (スイッチ)

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

Web Components Switch の例

使用方法

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

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

npm install igniteui-webcomponents

次に、以下のように、IgcSwitchComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

defineComponents(IgcSwitchComponent);

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

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

<igc-switch></igc-switch>

[!WARNING] IgcSwitchComponent コンポーネントは標準の <form> 要素では機能しません。代わりに Form を使用してください。

例

ラベル

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

<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>

スタイル設定

スイッチコンポーネントは、いくつかの CSS パーツ (base、control、indicator、および label) を公開して、スタイルを完全に制御できるようにします。

igc-switch::part(control) {
  background: beige;
  border-radius: 0;
}

igc-switch::part(thumb) {
  background: olive;
  border-radius: 2px;
  box-shadow: none;
}