React Checkbox (チェックボックス) の概要
React Checkbox は、React アプリにチェックボックスを追加できるコンポーネントです。これは標準の HTML チェックボックスとして動作し、ユーザーが基本的なチェック状態とチェックなし状態、または追加の不確定状態を選択できるようにします。また、React Checkbox コンポーネントのスタイルと、フォームで使用する機能を完全に制御できます。
Checkbox の例
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
export default class CheckboxOverview extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrCheckbox>
<span key="checkboxLabel">Checkbox</span>
</IgrCheckbox>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxOverview/>);
tsx
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
IgrCheckbox
は、選択された状態と選択されていない状態のどちらかを選択できることです。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
cmd
次に、以下のように、IgrCheckbox
とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
tsx
IgrCheckbox
の使用を開始する最も簡単な方法は次のとおりです:
<IgrCheckbox></IgrCheckbox>
tsx
IgrCheckbox コンポーネントは標準の <form> 要素では機能しません。代わりに Form を使用してください。
例
ラベル
チェックボックスに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。
<IgrCheckbox><span>Label</span></IgrCheckbox>
tsx
チェックボックスの label-position
属性を設定することにより、チェックボックスの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before
と after
(デフォルト) です。
<IgrCheckbox labelPosition="before"></IgrCheckbox>
tsx
チェックボックスは、チェックボックスの外部の要素でラベル付けすることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。
<span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
tsx
EXAMPLE
TSX
CheckboxLabelStyles.css
index.css
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CheckboxLabelStyles.css'
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
export default class CheckboxLabel extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<div className="wrapper">
<span id="checkbox-label">Label</span>
<IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
</div>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxLabel/>);
tsx
.wrapper {
display: flex;
align-items: center;
}
css
チェック済み
コンポーネントの checked
属性を使用して、チェックボックスをデフォルトでオンにするかオフにするかを決定できます。
<IgrCheckbox checked="true"></IgrCheckbox>
tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
export default class CheckboxChecked extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrCheckbox checked="true">
<span key="checkboxLabel">Label</span>
</IgrCheckbox>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxChecked/>);
tsx
不確定
コンポーネントの indeterminate
プロパティを使用して、チェックボックスの値を true にも false にも設定しません。
<IgrCheckbox indeterminate="true"></IgrCheckbox>
tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
export default class CheckboxIndeterminate extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrCheckbox indeterminate="true">
<span key="checkboxLabel">Label</span>
</IgrCheckbox>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxIndeterminate/>);
tsx
必須
required
プロパティを使用して、チェックボックスを必須としてマークできます。
<IgrCheckbox required="true"></IgrCheckbox>
tsx
無効
invalid
属性を使用して、チェックボックスを無効としてマークすることができます。
<IgrCheckbox invalid="true"></IgrCheckbox>
tsx
オフ
チェックボックスをオフにするには、disabled
属性を使用します。
<IgrCheckbox disabled="true"></IgrCheckbox>
tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
export default class CheckboxDisabled extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render(): JSX.Element {
return (
<div className="sample">
<IgrCheckbox disabled="true">
<span key="checkboxLabel">Label</span>
</IgrCheckbox>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxDisabled/>);
tsx
フォーム
Form
でチェックボックスを使用する場合は、name
と value
の属性を使用できます。
<IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>
tsx
スタイル設定
チェックボックス コンポーネントは、いくつかの CSS パーツ (base
、control
、indicator
、および label
) を公開して、スタイルを完全に制御できるようにします。
igc-checkbox::part(indicator) {
&::after {
padding: 12px;
border-radius: 14px;
}
}
igc-checkbox::part(indicator checked) {
border-radius: 0;
&::after {
background: olive;
border-color: olive;
stroke: beige;
}
}
css
API リファレンス
その他のリソース