React Button Group (ボタン グループ) の概要

React Button Group コンポーネントは、IgrToggleButton を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。

React ボタンの例

使用方法

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

npm install igniteui-react

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

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

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

Ignite UI for React ボタン グループがインポートされたので、IgrButtonGroup とそのボタンの基本構成を開始できます。

IgrButtonGroup セレクターを使用して、IgrToggleButton をラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、Selected 属性を使用します。

<IgrButtonGroup>
    <IgrToggleButton value="left">
        <IgrIcon name="format_align_left" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="center">
        <IgrIcon name="format_align_center" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="right">
        <IgrIcon name="format_align_right" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="justify" selected={true}>
        <IgrIcon name="format_align_justify" collection="material"/>
        <IgrRipple/>
    </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">
        <IgrIcon name="bold" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="italic">
        <IgrIcon name="italic" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="underlined">
        <IgrIcon name="underlined" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
</IgrButtonGroup>

サイズ

--ig-size CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。

スタイル設定

IgrButtonGroup コンポーネントは、ボタン グループ コンテナーのスタイルを設定できる group CSS パーツを公開します。 また、IgrToggleButton は、ボタン要素のスタイルを設定するために使用できる toggle CSS パーツを提供します。

igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}

API リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)