ボタン グループ コンポーネント

Angular ボタン グループ コンポーネントは、IgxButton ディレクティブを持つボタンを、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。

ライブ デモ

構造

Angular ボタン グループは、関連するトグル ボタンを共有コンテナーと個々のボタン アイテムを持つ単一グループに整理します。

Angular ボタン グループはトグル ボタンを含み、各ボタンにはアイコンとラベルを含めることができます。

Button Group
└── Toggle Button
    ├── Icon
    └── Label

作業の開始

Angular ボタン グループを使用するには、基本的なプロジェクト設定について Ignite UI for Angular の作業の開始 トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。

igniteui-angular パッケージを使用する Angular の場合は、パッケージをインストールします。

ng add igniteui-angular

次に、コンポーネントの imports コレクションに IGX_BUTTON_GROUP_DIRECTIVES と必要なスタンドアロン コンポーネントをインポートします。

import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
import { IgxIconComponent } from 'igniteui-angular/icon';

IgxButtonGroup を使用する最もシンプルな方法は次のとおりです。

<igx-buttongroup></igx-buttongroup>

使用方法

IgxButtonGroup を使用して、IgxButton ディレクティブを使用するボタンをラップします。デフォルトでボタンを選択するには、そのボタンで selected 入力を設定します。

<igx-buttongroup>
    <button igxButton>
        <igx-icon>format_align_left</igx-icon>
    </button>
    <button igxButton>
        <igx-icon>format_align_center</igx-icon>
    </button>
    <button igxButton selected>
        <igx-icon>format_align_justify</igx-icon>
    </button>
</igx-buttongroup>

配置

ボタン グループは水平および垂直レイアウトをサポートします。Alignment プロパティを使用して、グループ内のボタンの方向を設定します。

Angular の場合は、ButtonGroupAlignment 列挙型で alignment 入力を設定します。

import { ButtonGroupAlignment } from 'igniteui-angular/button-group';

public alignment = ButtonGroupAlignment.vertical;

<igx-buttongroup [alignment]="alignment">
    <button igxButton>Sofia</button>
    <button igxButton>London</button>
    <button igxButton selected>New York</button>
    <button igxButton>Tokyo</button>
</igx-buttongroup>

選択

Ignite UI for Angular ボタン グループの選択を構成するには、プラットフォーム固有の選択プロパティを使用します。

Angular の場合は、selectionMode プロパティを使用します。使用可能なモードは次のとおりです。

• single - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。
• single-required - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけで、最初に選択すると、ユーザーの操作によって選択解除することはできません。
• multiple - グループ内の複数のボタンを選択または選択解除できます。

以下のサンプルは、公開された ButtonGroup 選択モードを示しています。

Angular の選択モードは single、singleRequired、multi です。

selectionMode 入力を設定して選択の動作を構成します。

<igx-buttongroup [selectionMode]="'multi'">
    <button igxButton selected>Bold</button>
    <button igxButton>Italic</button>
    <button igxButton>Underline</button>
</igx-buttongroup>

IgxButton は、その selected 入力またはボタン グループの values 入力を通じて選択済みとしてマークできます。

状態

グループ内の各ボタンは、有効および無効のバリアントをサポートし、選択済みまたは未選択の状態にできます。含まれる IgxButton コンポーネントが提供する状態動作を使用します。

インタラクション状態

グループ内の有効なボタンは、アイドル、ホバー、フォーカスのインタラクション状態をサポートします。含まれる IgxButton コンポーネントが提供する状態動作を使用します。

レイアウト テンプレート

各ボタンにはテキスト、アイコン、またはその両方を使用できます。グループ全体でコンテンツ スタイルを統一し、ボタン コンテンツ API を使用して各ボタンに表示するアイコンとラベルを制御します。

カスタム トグル ボタン

Angular の場合は、values 入力を使用してカスタマイズされたボタンの配列を指定します。各アイテムには label、icon、selected、disabled、togglable などのプロパティを定義できます。

コンポーネント クラスでボタンの値を定義します。

interface IButton {
    label?: string;
    icon?: string;
    disabled?: boolean;
    togglable?: boolean;
    selected?: boolean;
    color?: string;
}

public bordersButtons: IButton[] = [
    { icon: 'border_top', selected: true },
    { icon: 'border_right' },
    { icon: 'border_bottom' },
    { icon: 'border_left' }
];

<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>

完全な values モデルと構成については、Angular ボタン グループのサンプルを参照してください。

サイズ

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

igx-buttongroup {
    --ig-size: var(--ig-size-small);
}

<igx-buttongroup></igx-buttongroup>

使用すべき場合と使用すべきでない場合

使用する場合: ユーザーが 1 つまたは複数のオプションを選択できる関連するトグル アクションを整理するためにボタン グループを使用します。

使用しない場合: 関連のないアクションや単一のトグル アクションにはボタン グループを使用しないでください。代わりにスタンドアロンの IgxToggleButton を使用します。

Do	Don’t

プロパティ

Angular ボタン グループは、次のプロパティを公開します。

スタイル設定

Angular ボタン グループ テーマは、グループ アイテムとそのインタラクション状態の Sass パラメーターを公開します。プライマリ テーマ プロパティを変更すると、関連する状態プロパティが更新され、コンポーネントの視覚的な一貫性が保たれます。

Sass テーマ

Angular テーマ システムを使用して、アプリケーションの他の部分と一貫したスタイルでボタン グループをカスタマイズします。

カスタム ボタン グループ テーマを作成する前に Angular テーマ関数をインポートします。

@use "igniteui-angular/theming" as *;

button-group-theme でテーマを作成し、コンポーネント スコープに含めます。

$custom-button-group: button-group-theme(
    $item-background: #57a5cd,
);

:host {
    @include tokens($custom-button-group);
}

CSS 変数

Angular テーマ トークンを使用して、ボタン グループ アイテムの色とインタラクション状態をカスタマイズします。以下のプライマリ Sass パラメーターは関連する状態トークンを更新します。

スタイル パーツ

ボタン グループとそれに含まれるトグル ボタンをターゲットにするには、次の CSS パーツを使用します。

カスタム スタイル設定

次の例では、グループの背景とパディングを変更し、含まれるトグル ボタンのテキスト色を変更します。

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

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

Tailwind によるスタイル設定

Ignite UI の Tailwind ユーティリティ クラスを使用して Angular ボタン グループをスタイル設定できます。最初に Tailwind を設定 してから、グローバル スタイルシートにユーティリティ ファイルをインポートします。

@import "tailwindcss";
@use 'igniteui-theming/tailwind/utilities/material.css';

対応するテーマに light-button-group または dark-button-group を使用し、任意のプロパティで生成された CSS 変数をオーバーライドします。

<igx-button-group class="!light-button-group ![--item-background:#7B9E89]">
</igx-button-group>

感嘆符 (!) はユーティリティ クラスを important にし、コンポーネント テーマより優先させます。

アクセシビリティ

Angular Button Group は、関連するトグル ボタンを整理しながら、各ボタンの選択状態と無効状態を公開します。

キーボード インタラクション

ボタン グループは、内包するトグル ボタンにキーボード インタラクションを委譲します。各トグル ボタンはネイティブ ボタンをレンダリングするため、標準のボタン キーボード動作によってフォーカスされたアイテムがアクティブ化され、設定された選択モードに従って選択状態が更新されます。

ボタン グループが無効の場合、内包するトグル ボタンも無効になり、キーボードによるインタラクティブ操作に対応しなくなります。

スクリーン リーダー / ARIA

ボタン グループはグループの関係を公開し、各トグル ボタンはネイティブ ボタン セマンティクスを通じてその状態を公開します。

• グループ コンテナーは role="group" を使用します。
• Angular は選択状態が変化すると各内包ボタンの aria-pressed 値を更新し、グループが無効の場合は子ボタンを無効にします。
• グループはユーザーが選択を変更すると selected および deselected を発行します。各イベントには選択されたトグル ボタンとそのインデックスが含まれます。
• すべてのアイコンのみのボタンに表示テキスト、igxLabel、または他のアクセシブルな名前を提供してください。

アクセシビリティ準拠

インフラジスティックスは、アクセシビリティ準拠 トピックで、Section 508 および WCAG 2.1 ガイドライン領域における Ignite UI for Angular のアクセシビリティ サポートを文書化しています。

ユーザー側の責任:

• 各トグル ボタンに明確な表示ラベルまたはアクセシブルな名前を付けてください。特にアイコンのみのボタンでは重要です。
• グループの選択モードをコントロールの目的に合わせて設定し、ユーザーが 1 つまたは複数のオプションを選択できるかどうかを理解できるようにしてください。
• グループまたはその選択状態をカスタマイズする際は、論理的なボタンの順序と十分な色のコントラストを維持してください。

トラブルシューティング

ボタン グループを単一のトグル、フォーム フィールド、またはアクション グループとして扱う前に、このセクションで制約と一般的な判断のポイントを確認してください。

selectedItems でボタンが選択されないのはなぜですか?

すべてのトグル ボタンに一意の value 属性があることを確認してください。selectedItems プロパティはこれらの値に依存します。

既知の制限

Angular ボタン グループはトグル ボタンを調整しますが、個々のラベルやアクセシブルな名前を置き換えるものではありません。

• 選択動作は設定された selection モードに依存します。
• selectedItems プロパティは、含まれるトグル ボタンの一意の value 属性に依存します。
• ボタン グループはボタンのラベルやアイコンを提供しません。各トグル ボタンのコンテンツは個別に定義してください。

API リファレンス

Angular ボタン グループ API リファレンスは、コンポーネントと関連するボタン機能の完全な API サーフェスを提供します。

依存関係

Angular ボタン グループには、Angular パッケージとそのテーマ スタイルシートが必要です。サンプルでは IgxButton、IgxIcon、IgxRipple コンポーネントも使用します。

その他のリソース

API の詳細とプロジェクト サポートについては、次の Angular リソースを使用してください。

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

関連コンポーネント

• Button - 選択可能なグループではなく個別のアクションが必要な場合は、Button を使用します。

FAQ