Button Group

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

    Angular Button Group の例

    使用方法

    はじめに

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

    // 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 ファイルをインポートする必要があります。

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $custom-button-group: igx-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
    );
    

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

    CSS 変数の使用

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

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

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

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

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

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

    デモ

    API リファレンス

    テーマの依存関係

    その他のリソース

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