React Checkbox (チェックボックス) の概要
React Checkbox は、React アプリにチェックボックスを追加できるコンポーネントです。これは標準の HTML チェックボックスとして動作し、ユーザーが基本的なチェック状態とチェックなし状態、または追加の不確定状態を選択できるようにします。また、React Checkbox コンポーネントのスタイルと、フォームで使用する機能を完全に制御できます。
Checkbox の例
使用方法
IgrCheckbox
は、選択された状態と選択されていない状態のどちらかを選択できることです。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrCheckbox
とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
IgrCheckbox
の使用を開始する最も簡単な方法は次のとおりです:
<IgrCheckbox></IgrCheckbox>
[!WARNING]
IgrCheckbox
コンポーネントは標準の<form>
要素では機能しません。代わりにForm
を使用してください。
例
ラベル
チェックボックスに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。
<IgrCheckbox><span>Label</span></IgrCheckbox>
チェックボックスの label-position
属性を設定することにより、チェックボックスの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before
と after
(デフォルト) です。
<IgrCheckbox labelPosition="before"></IgrCheckbox>
チェックボックスは、チェックボックスの外部の要素でラベル付けすることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。
<span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
チェック済み
コンポーネントの checked
属性を使用して、チェックボックスをデフォルトでオンにするかオフにするかを決定できます。
<IgrCheckbox checked="true"></IgrCheckbox>
不確定
コンポーネントの indeterminate
プロパティを使用して、チェックボックスの値を true にも false にも設定しません。
<IgrCheckbox indeterminate="true"></IgrCheckbox>
必須
required
プロパティを使用して、チェックボックスを必須としてマークできます。
<IgrCheckbox required="true"></IgrCheckbox>
無効
invalid
属性を使用して、チェックボックスを無効としてマークすることができます。
<IgrCheckbox invalid="true"></IgrCheckbox>
オフ
チェックボックスをオフにするには、disabled
属性を使用します。
<IgrCheckbox disabled="true"></IgrCheckbox>
フォーム
Form
でチェックボックスを使用する場合は、name
と value
の属性を使用できます。
<IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>
スタイル設定
IgrCheckbox
コンポーネントは、スタイル設定に使用できる 4 つの CSS パーツを公開します。
名前 | 説明 |
---|---|
base |
チェックボックスの基本ラッパー。 |
control |
チェックボックスの入力要素。 |
indicator |
チェックボックスのインジケーター アイコン。 |
label |
チェックボックスのラベル。 |
この 4 つの CSS パーツを使用すると、Checkbox のスタイルを完全に制御できます。
igc-checkbox::part(indicator) {
stroke: var(--ig-secondary-500-contrast);
}
igc-checkbox::part(control checked)::after {
border-radius: 4px;
background: var(--ig-secondary-500);
}