React Switch (スイッチ)

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

React Switch の例

使用方法

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

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

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

import { IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

<IgrSwitch></IgrSwitch>

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

例

ラベル

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

<IgrSwitch><span>Label</span></IgrSwitch>

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

<IgrSwitch aria-labelledby="switchLabel" labelPosition="before" ><span id="switch-label">Label</span></IgrSwitch>

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

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

チェック済み

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

<IgrSwitch checked={true}></IgrSwitch>

必須

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

<IgrSwitch required={true}></IgrSwitch>

無効

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

オフ

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

<IgrSwitch disabled="true"></IgrSwitch>

フォーム

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

<IgrSwitch name="wifi" value="enabled"></IgrSwitch>

スタイル設定

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

名前	説明
`base`	スイッチの基本ラッパー。
`control`	スイッチの入力要素。
`thumb`	スイッチの位置インジケーター。
`label`	スイッチのラベル。

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}