Button Group

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

Angular Button Group の例

使用方法

はじめに

Button Group が NgModule としてエクスポートされるため、アプリケーションで AppModule に IgxButtonGroupModule をインポートする必要があります。

// app.module.ts

import { IgxButtonGroupModule } from 'igniteui-angular';

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

ボタン グループの追加

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]="true">
        <igx-icon>format_align_justify</igx-icon>
    </button>
</igx-buttongroup>

例

配置

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

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
...
public alignment = ButtonGroupAlignment.vertical;
...

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

複数選択

multiSelection プロパティを使用して、ボタン グループ内のボタンの複数選択を有効/無効化します。

<!-- sample.component.html -->
<igx-buttongroup [multiSelection]="true">
    <button igxButton>
        <igx-icon>format_bold</igx-icon>
    </button>
    <button igxButton>
        <igx-icon>format_italic</igx-icon>
    </button>
    <button igxButton>
        <igx-icon>format_underlined</igx-icon>
    </button>
</igx-buttongroup>

表示密度

displayDensity プロパティを使用して、ボタン グループの表示密度を制御します。これにより、グループ内のボタンのスタイルが、最大、最小、または標準 (デフォルト値) に設定されます。

Note

ボタン グループ内のボタンの表示密度は、明示的に指定されている場合は変更されません。

// sample.component.ts
...
public displayDensity = 'comfortable';
public displayDensities;

public ngOnInit() {
    this.displayDensities = [
        { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
        { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
        { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
    ];
}

public selectDensity(event) {
    this.displayDensity = this.displayDensities[event.index].label;
}
...

<!-- sample.component.html -->
<igx-buttongroup [values]="displayDensities" 
                 [displayDensity]="displayDensity"
                 (selected)="selectDensity($event)">
</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 [multiSelection]="true" [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 を拡張する新しいテーマを作成し、それぞれのボタン グループのクラスの下でスコープできます。

CSS 変数の使用

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

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

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        @include button-group($custom-button-group);
    }
}

デモ

API リファレンス

• IgxButtonGroupComponent
• IgxButtonGroup スタイル
• IgxButtonDirective
• IgxButton スタイル

テーマの依存関係

• IgxIcon テーマ
• IgxButton テーマ
• IgxRipple テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)