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

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

Ignite UI for Web Components Radio の例

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
ts

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

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

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

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

例

ラベル

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

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

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

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

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

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioLabel {
  constructor() {
  }
}

new RadioLabel();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit" label-position="before" value="apple">Apple</igc-radio>
            <div style="display: flex; align-items: center">
              <span id="radio-label">Label</span>
              <igc-radio
                name="fruit"
                label-position="before"
                aria-labelledby="radio-label"
                value="orange"
              ></igc-radio>
            </div>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

チェック済み

ラジオをオンに切り替えるには、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>
html

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

無効

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

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

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

defineComponents(IgcRadioComponent);
export class RadioInvalid {
  constructor() {
  }
}

new RadioInvalid();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio invalid>Invalid</igc-radio>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

オフ

ラジオをオフにするには、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>
html

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioDisabled {
  constructor() {
  }
}

new RadioDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Disabled</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" disabled>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

グループの配置

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroupAlignment {
  constructor() {
  }
}

new RadioGroupAlignment();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group Alignment</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 430px; border: 1px solid gainsboro">
          <igc-radio-group alignment="horizontal">
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

フォーム

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

スタイル設定

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

:root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}
scss

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioStyling {
  constructor() {
  }
}

new RadioStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Ignite UI for Web Components Radio の例

使用方法

例

ラベル

チェック済み

無効

オフ

グループの配置

フォーム

スタイル設定

API リファレンス

その他のリソース

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

Ignite UI for Web Components Radio の例

使用方法

例

ラベル

チェック済み

無効

オフ

グループの配置

フォーム

スタイル設定

API リファレンス

その他のリソース

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