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" />

IgbRadio の使用を開始する最も簡単な方法は次のとおりです:

<IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

例

ラベル

IgbRadio に意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<IgbRadio>Apple</IgbRadio>

LabelPosition 属性を設定することにより、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);
}

API リファレンス

その他のリソース

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