React Button Group (ボタン グループ) の概要
React Button Group コンポーネントは、IgrToggleButton を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。
React ボタンの例
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrButtonGroup とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrButtonGroupModule, IgrButtonGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。
Ignite UI for React ボタン グループがインポートされたので、IgrButtonGroup とそのボタンの基本構成を開始できます。
IgrButtonGroup セレクターを使用して、IgrToggleButton をラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、selected 属性を使用します。
<IgrButtonGroup>
<IgrToggleButton value="left" key="button-left">
<IgrIcon name="format_align_left" collection="material" key="icon-left" />
<IgrRipple key="ripple-left" />
</IgrToggleButton>
<IgrToggleButton value="center" key="button-center">
<IgrIcon name="format_align_center" collection="material" key="icon-center" />
<IgrRipple key="ripple-center" />
</IgrToggleButton>
<IgrToggleButton value="right" key="button-right">
<IgrIcon name="format_align_right" collection="material" key="icon-right" />
<IgrRipple key="ripple-right" />
</IgrToggleButton>
<IgrToggleButton value="justify" selected={true} key="button-justify">
<IgrIcon name="format_align_justify" collection="material" key="icon-justify" />
<IgrRipple key="ripple-justify" />
</IgrToggleButton>
</IgrButtonGroup>
コード例
配置
alignment プロパティを使用して、ボタン グループ内のボタンの方向を設定します。
選択
Ignite UI for React IgrButtonGroup の選択を構成するには、その selection プロパティを使用できます。このプロパティは、次の 3 つのモードを受け入れます:
- single - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。
- single-required - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけであり、最初に選択すると、ユーザーの操作を通じて選択を解除することはできません。
- multiple - グループ内の複数のボタンを選択または選択解除できます。
以下のサンプルは、公開された IgrButtonGroup 選択モードを示しています。
IgrToggleButton は、selected 属性または IgrButtonGroup の selectedItems 属性を通じて選択済みとしてマークできます。
<IgrButtonGroup selectedItems={['bold']}>
<IgrToggleButton value="bold" key="button-bold">
<IgrIcon name="bold" collection="material" key="icon-bold" />
<IgrRipple key="ripple-bold" />
</IgrToggleButton>
<IgrToggleButton value="italic" key="button-italic">
<IgrIcon name="italic" collection="material" key="icon-italic" />
<IgrRipple key="ripple-italic" />
</IgrToggleButton>
<IgrToggleButton value="underlined" key="button-underlined">
<IgrIcon name="underlined" collection="material" key="icon-underlined" />
<IgrRipple key="ripple-underlined" />
</IgrToggleButton>
</IgrButtonGroup>
[!Note]
IgrButtonGroupのselectedItemsプロパティを使用するには、IgrToggleButtonvalue属性の設定が必須です。
サイズ
--ig-size CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。
スタイル設定
IgrButtonGroup コンポーネントは、ボタン グループ コンテナーのスタイルを設定できる group CSS パーツを公開します。
また、IgrToggleButton は、ボタン要素のスタイルを設定するために使用できる toggle CSS パーツを提供します。