Button Group

Ignite UI for Angular igx-buttongroup コンポーネントは、ボタン グループの機能、さらに水平/垂直の配置、単一/複数の選択、および切り替え機能を提供します。igx-ButtonGroup コンポーネントは、igxButton ディレクティブを使用します。

Button Group デモ

依存関係

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

// app.module.ts

import { IgxButtonGroupModule } from 'igniteui-angular';

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

使用方法

igx-buttongroup を使用して、ボタンを Angular スタイルのボタン グループに配置します。

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
...
public alignment = ButtonGroupAlignment.vertical;
...
 public ngOnInit() {
    this.cities = [
      new Button({
          label: "Sofia"
      }),
      new Button({
          label: "London"
      }),
      new Button({
          label: "New York",
          selected: true
      }),
      new Button({
          label: "Tokyo"
      })
  ];
  }
...
<igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment">
</igx-buttongroup>

「排他的」または「複数選択」を使用することもできますが、ボタンを切り替え可能および無効に設定することもできます。次の例では、一番左のボタンが選択されますが切り替えはできません。一番右のボタンは無効になっています。

//sample.component.ts
...
public ngOnInit() {
    this.alignOptions = [
      new Button({
          icon: "format_align_left",
          selected: true,
          togglable: false
      }),
      new Button({
          icon: "format_align_center",
      }),
      new Button({
          icon: "format_align_right",
          selected: true
      }),
      new Button({
          disabled: true,
          icon: "format_align_justify",
      })
  ];
  }
...
<igx-buttongroup [multiSelection]="true" [values]="alignOptions">
</igx-buttongroup>

API リファレンス

その他のリソース

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