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
    
    import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
    

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

    <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>
    
    Warning

    IgcRadioComponent コンポーネントは標準の <form> 要素では機能しません。代わりに IgcFormComponent を使用してください。

    ラベル

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

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

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

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

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

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

    グループの配置

    IgcRadioGroupComponent を使用すると、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>
    

    フォーム

    IgcFormComponent で無線を使用する場合は、name 属性と value 属性を使用できます。

    <igc-radio-group>
      <igc-radio name="option1" value="apple">Apple</igc-radio>
      <igc-radio name="option2" value="banana">Banana</igc-radio>
      <igc-radio name="option4" value="mango">Mango</igc-radio>
      <igc-radio name="option3" value="banana">Orange</igc-radio>
    </igc-radio-group>
    

    スタイル設定

    IgcRadioComponent コンポーネントは、いくつかの CSS パーツ (basecontrol、および label) を公開して、スタイルを完全に制御できるようにします。グローバル パレットの色を変更して、ラジオ コンポーネントの色を変更することもできます。

    :root {
        --igc-primary-h: 60deg;
        --igc-primary-s: 100%;
        --igc-primary-l: 25%;
    }
    
    igc-radio::part(control) {
        --size: 18px;
    }
    

    API リファレンス

    その他のリソース