Web Components Button Group (ボタン グループ) の概要

    Web Components Button Group コンポーネントは、IgcToggleButtonComponent を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。

    Web Components ボタンの例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    使用方法

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

    npm install igniteui-webcomponents
cmd

    次に、以下のように、IgcButtonGroupComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

defineComponents(IgcButtonGroupComponent);
ts

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

    Ignite UI for Web Components ボタン グループがインポートされたので、IgcButtonGroupComponent とそのボタンの基本構成を開始できます。

    IgcButtonGroupComponent セレクターを使用して、IgcToggleButtonComponent をラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、selected 属性を使用します。

     <igc-button-group>
    <igc-toggle-button value="left">
        <igc-icon name="format_align_left" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="center">
        <igc-icon name="format_align_center" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="right">
        <igc-icon name="format_align_right" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="justify" selected>
        <igc-icon name="format_align_justify" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>
html
    Ignite UI for Web Components | CTA Banner

    コード例

    配置

    alignment プロパティを使用して、ボタン グループ内のボタンの方向を設定します。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    選択

    Ignite UI for Web Components IgcButtonGroupComponent の選択を構成するには、その selection プロパティを使用できます。このプロパティは、次の 3 つのモードを受け入れます:

    • single - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。
    • single-required - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけであり、最初に選択すると、ユーザーの操作を通じて選択を解除することはできません。
    • multiple - グループ内の複数のボタンを選択または選択解除できます。

    以下のサンプルは、公開された IgcButtonGroupComponent 選択モードを示しています。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    IgcToggleButtonComponent は、selected 属性または IgcButtonGroupComponent の selectedItems 属性を通じて選択済みとしてマークできます。

    <igc-button-group selected-items='["bold"]'>
    <igc-toggle-button value="bold">
        <igc-icon name="bold" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="italic">
        <igc-icon name="italic" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="underlined">
        <igc-icon name="underlined" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>
html

    IgcButtonGroupComponent の selectedItems プロパティを使用するには、IgcToggleButtonComponent value 属性の設定が必須です。

    サイズ

    --ig-size CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    スタイル設定

    IgcButtonGroupComponent コンポーネントは、ボタン グループ コンテナーのスタイルを設定できる group CSS パーツを公開します。 また、IgcToggleButtonComponent は、ボタン要素のスタイルを設定するために使用できる toggle CSS パーツを提供します。

    igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}
css

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース