Blazor Button Group (ボタン グループ) の概要
Blazor Button Group コンポーネントは、IgbToggleButton を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。
Blazor ボタンの例
使用方法
IgbButtonGroup を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule));
また、IgbButtonGroup コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
Ignite UI for Blazor ボタン グループがインポートされたので、IgbButtonGroup とそのボタンの基本構成を開始できます。
IgbButtonGroup セレクターを使用して、IgbToggleButton をラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、Selected 属性を使用します。
<IgbButtonGroup>
<IgbToggleButton Value="left">
<IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
<IgbRipple />
</IgbToggleButton>
<IgbToggleButton Value="center">
<IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
<IgbRipple />
</IgbToggleButton>
<IgbToggleButton Value="right">
<IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
<IgbRipple />
</IgbToggleButton>
<IgbToggleButton Value="justify" Selected="true">
<IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
<IgbRipple />
</IgbToggleButton>
</IgbButtonGroup>
コード例
配置
Alignment プロパティを使用して、ボタン グループ内のボタンの方向を設定します。
選択
Ignite UI for Blazor IgbButtonGroup の選択を構成するには、その Selection プロパティを使用できます。このプロパティは、次の 3 つのモードを受け入れます:
- single - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。
- single-required - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけであり、最初に選択すると、ユーザーの操作を通じて選択を解除することはできません。
- multiple - グループ内の複数のボタンを選択または選択解除できます。
以下のサンプルは、公開された IgbButtonGroup 選択モードを示しています。
サイズ
--ig-size CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。
スタイル設定
IgbButtonGroup コンポーネントは、ボタン グループ コンテナーのスタイルを設定できる group CSS パーツを公開します。
また、IgbToggleButton は、ボタン要素のスタイルを設定するために使用できる toggle CSS パーツを提供します。