React Switch (スイッチ)

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

React Switch の例

使用方法

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

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

npm install igniteui-react

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

import { IgrSwitchModule, IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSwitchModule.register();

<IgrSwitch></IgrSwitch>

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

例

ラベル

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

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

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

<IgrSwitch ariaLabelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>

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

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

チェック済み

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

<IgrSwitch checked="true"></IgrSwitch>

必須

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

<IgrSwitch required="true"></IgrSwitch>

無効

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

オフ

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

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

フォーム

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

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

スタイル設定

スイッチコンポーネントは、いくつかの 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;
}