Blazor Radio & Radio Group (ラジオとラジオ グループ)
Ignite UI for Blazor Radio コンポーネントを使用すると、ユーザーは、並べて表示される利用可能なオプションのセットから 1 つのオプションを選択できます。
Ignite UI for Blazor Radio の例
使用方法
IgbRadio と IgbRadioGroup を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbRadioModule),
typeof(IgbRadioGroupModule)
);
また、追加の CSS ファイルをリンクして、スタイルを IgbRadio および IgbRadioGroup コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbRadioGroup>
<IgbRadio>Apple</IgbRadio>
<IgbRadio>Banana</IgbRadio>
<IgbRadio>Mango</IgbRadio>
<IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>
[!WARNING]
IgbRadioコンポーネントは標準の<form>要素では機能しません。代わりにFormを使用してください。
例
ラベル
IgbRadio に意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。
<IgbRadio>Apple</IgbRadio>
label-position 属性を設定することにより、IgbRadio ボタンの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。
<IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>
IgbRadio には、ラジオの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。
<span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />
チェック済み
ラジオをオンに切り替えるには、checked 属性を使用できます。
<IgbRadioGroup>
<IgbRadio>Apple</IgbRadio>
<IgbRadio Checked="true">Banana</IgbRadio>
<IgbRadio>Mango</IgbRadio>
<IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>
無効
invalid 属性を使用して、ラジオを無効としてマークできます。
<IgbRadio Invalid="true" />
オフ
ラジオをオフにするには、disabled 属性を使用できます。
<IgbRadioGroup>
<IgbRadio>Apple</IgbRadio>
<IgbRadio Disabled="true">Banana</IgbRadio>
<IgbRadio>Mango</IgbRadio>
<IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>
グループの配置
IgbRadioGroup を使用すると、alignment 属性を使用して、含まれているラジオ ボタンの配置方向を簡単に変更できます。許可される値は、vertical (デフォルト) と horizontal です。
<IgbRadioGroup Alignment="@ContentOrientation.Horizontal">
<IgbRadio>Apple</IgbRadio>
<IgbRadio>Banana</IgbRadio>
<IgbRadio>Mango</IgbRadio>
<IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>
フォーム
Form で無線を使用する場合は、name 属性と value 属性を使用できます。
<IgbRadioGroup>
<IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
<IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
<IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
<IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>
スタイル設定
IgbRadio コンポーネントは、いくつかの CSS パーツ (base、control、および label) を公開して、スタイルを完全に制御できるようにします。
igc-radio::part(control) {
--size: 18px;
}
igc-radio-group {
padding: 12px;
}
igc-radio::part(checked)::after {
background-color: var(--ig-success-500);
}
igc-radio::part(label) {
color: var(--ig-secondary-800);
}