Angular Button Group (ボタングループ) コンポーネントの概要

Angular Button Group コンポーネントは、ボタンを水平/垂直配置、単一/複数選択、オン/オフ切り替えが可能なスタイルのボタングループに組織するために使用します。

Angular Button Group の例

Ignite UI for Angular Button Group を使用した作業の開始

Ignite UI for Angular Button Group コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxButtonGroupModule をインポートします。

// app.module.ts

...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxButtonGroupModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxButtonGroupComponent をスタンドアロンの依存関係としてインポートすることも、IGX_BUTTON_GROUP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

...
import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-buttongroup>
        <button igxButton>
            <igx-icon>format_align_left</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_center</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_right</igx-icon>
        </button>
        <button igxButton selected>
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent]
    /* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Button Group モジュールまたはディレクティブをインポートしたので、igx-buttongroup とそのボタンの基本構成を開始できます。

Angular Button Group コンポーネントの使用

ボタングループの追加

igx-buttongroup セレクターを使用してボタンをラップし、ボタングループに表示します。デフォルトでボタンを選択したい場合、selected プロパティを使用します。

<!-- sample.component.html -->
<igx-buttongroup>
  <button igxButton>
    <igx-icon>format_align_left</igx-icon>
  </button>
  <button igxButton>
    <igx-icon>format_align_center</igx-icon>
  </button>
  <button igxButton>
    <igx-icon>format_align_right</igx-icon>
  </button>
  <button igxButton selected>
    <igx-icon>format_align_justify</igx-icon>
  </button>
</igx-buttongroup>

例

配置

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

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package

...
public alignment = ButtonGroupAlignment.vertical;
...

<!-- sample.component.html -->
<igx-buttongroup [alignment]="alignment">
  <button igxButton>Sofia</button>
  <button igxButton>London</button>
  <button igxButton selected>New York</button>
  <button igxButton>Tokyo</button>
</igx-buttongroup>

選択

igx-buttongroup 選択を構成するには、その selectionMode プロパティを使用できます。このプロパティは、次の 3 つのモードを受け入れます:

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

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

サイズ

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

/* sample.component.scss */
igx-buttongroup {
  --ig-size: var(--ig-size-small);
}

<!-- sample.component.html -->
<igx-buttongroup></igx-buttongroup>

カスタムトグルボタン

values プロパティを使用して、ボタングループ内のカスタムボタンの配列を設定します。

// sample.component.ts

interface IButton {
    ripple?: string;
    label?: string;
    disabled?: boolean;
    togglable?: boolean;
    selected?: boolean;
    color?: string;
    icon?: string;
}

class ToggleButton {
    private ripple: string;
    private label: string;
    private disabled: boolean;
    private togglable: boolean;
    private selected: boolean;
    private color: string;
    private icon: string;

    constructor(obj?: IButton) {
        this.ripple = obj.ripple || 'gray';
        this.label = obj.label;
        this.selected = obj.selected || false;
        this.togglable = obj.togglable || true;
        this.disabled = obj.disabled || false;
        this.color = obj.color;
        this.icon = obj.icon;
    }
}
...
public bordersButtons: ToggleButton[];

public ngOnInit() {
    this.bordersButtons = [
        new ToggleButton({
            icon: 'border_top',
            selected: true
        }),
        new ToggleButton({
            icon: 'border_right',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_bottom',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_left',
            selected: false
        })
    ];
}
...

<!-- sample.component.html -->
<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>

スタイル設定

ボタングループのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、button-group-theme を拡張し、さまざまな状態のボタングループの項目をスタイルするパラメーターを受け取る新しいテーマを作成する方法です。

$custom-button-group: button-group-theme(
  $item-text-color: #fdfdfd,
  $item-background: #2f4d6a,
  $item-hover-text-color: #fdfdfd,
  $item-hover-background: #1f3347,
  $item-selected-text-color: #fdfdfd,
  $item-selected-background: #1f3347,
  $item-selected-hover-background: #1f3347,
  $disabled-text-color: gray,
  $disabled-background-color: lightgray,
);

ご覧のとおり、button-group-theme は、項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。ボタン固有のパラメーターを変更する場合は、button-theme を拡張する新しいテーマを作成し、それぞれのボタングループのクラスの下でスコープできます。

最後にコンポーネントのテーマを含めます。

@include css-vars($custom-button-group);

デモ

API リファレンス

テーマの依存関係

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular Button Group (ボタン グループ) コンポーネントの概要