Web Components Radio & Radio Group (ラジオとラジオ グループ)

Ignite UI for Web Components Radio コンポーネントを使用すると、ユーザーは、並べて表示される利用可能なオプションのセットから 1 つのオプションを選択できます。

Ignite UI for Web Components Radio の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

Radio および RadioGroup を使用する前に、次のように登録する必要があります:

import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);

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

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

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

例

ラベル

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

<igc-radio>Apple</igc-radio>

LabelPosition 属性を設定することにより、Radio ボタンの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。

<igc-radio label-position="before">Apple</igc-radio>

Radio には、ラジオの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

<span id="radio-label">Label</span>
<igc-radio aria-labelledby="radio-label"></igc-radio>

チェック済み

ラジオをオンに切り替えるには、Checked 属性を使用できます。

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio checked>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

無効

Invalid 属性を使用して、ラジオを無効としてマークできます。

<igc-radio invalid></igc-radio>

オフ

ラジオをオフにするには、Disabled 属性を使用できます。

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio disabled>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

グループの配置

RadioGroup を使用すると、alignment 属性を使用して、含まれているラジオ ボタンの配置方向を簡単に変更できます。許可される値は、vertical (デフォルト) と horizontal です。

<igc-radio-group alignment="horizontal">
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>

フォーム

Form で無線を使用する場合は、Name 属性と Value 属性を使用できます。

<igc-radio-group>
  <igc-radio name="fruit" value="apple">Apple</igc-radio>
  <igc-radio name="fruit" value="banana">Banana</igc-radio>
  <igc-radio name="fruit" value="mango">Mango</igc-radio>
  <igc-radio name="fruit" value="banana">Orange</igc-radio>
</igc-radio-group>

スタイル設定

Radio コンポーネントは、いくつかの 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 Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)