Class IgxButtonGroupComponent

Ignite UI for Angular Button Group - ヘルプ

Ignite UI Button Group はボタンのグループを垂直方向または水平方向に表示します。 グループは single、multi、および singleRequired 選択をサポートします。

例:

<igx-buttongroup selectionMode="multi" [values]="fontOptions">
</igx-buttongroup>

以上に表示される fontOptions 値は以下で定義されます。

this.fontOptions = [
{ icon: 'format_bold', selected: false },
{ icon: 'format_italic', selected: false },
{ icon: 'format_underlined', selected: false }];

実装

  • AfterViewInit
  • OnDestroy

コンストラクター

プロパティ

deselected: EventEmitter<IButtonGroupEventArgs> = ...

ボタンが選択解除されたときにイベントを発生する

プロパティです。

 @ViewChild("toast")
private toast: IgxToastComponent;
public deselectedHandler(buttongroup){
this.toast.open()
}
//...
<igx-buttongroup> #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have deselected a button!</igx-toast>
id: string = ...

id 属性の値を取得または設定します。設定されていない場合、自動的に生成されます。

 <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
selected: EventEmitter<IButtonGroupEventArgs> = ...

ボタンが選択されたときにイベントを発生する

プロパティです。

@ViewChild("toast")
private toast: IgxToastComponent;
public selectedHandler(buttongroup) {
this.toast.open()
}
//...
<igx-buttongroup #MyChild [selectionMode]="'multi'" (selected)="selectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have made a selection!</igx-toast>
values: any

Button オブジェクトのコレクションを使用してボタングループ内のボタンを構成するプロパティです。

 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 [selectionMode]="'single'" [values]="cities"></igx-buttongroup>

アクセサー

  • get isVertical(): boolean
  • igx-buttongroup の配置が垂直方向の場合に true を返します。 アクセサーが正しく動作するためにプロパティを明示的に設定します。

    <igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions">
    
    //...
    @ViewChild("MyChild")
    private buttonG: IgxButtonGroupComponent;
    ngAfterViewInit(){
    let orientation = this.buttonG.isVertical;
    }

    返却 boolean

  • get itemContentCssClass(): string
  • IgxButtonGroup の項目コンテンツの CSS クラスを返します。

     @ViewChild("MyChild")
    public buttonG: IgxButtonGroupComponent;
    ngAfterViewInit(){
    let buttonSelect = this.buttonG.itemContentCssClass;
    }

    返却 string

  • set itemContentCssClass(value): void
  • itemContentCssClass 入力を使用してスタイルの設定を許可します。 値はボタン グループに適用する CSS クラス名になります。

    public style1 = "styleClass";
    //..
    <igx-buttongroup [itemContentCssClass]="style1" [selectionMode]="'multi'" [values]="alignOptions">
    

    パラメーター

    • value: string

    返却 void

メソッド