id 属性の値を設定する @Input プロパティ。設定されていない場合、自動的に生成されます。
<igx-buttongroup [id]="'igx-dialog-56'" [multiSelection]="!multi" [values]="alignOptions">複数のボタンの選択を有効にする @Input プロパティ。デフォルトで、複数選択は false です。
<igx-buttongroup [multiSelection]="false" [alignment]="alignment"></igx-buttongroup>ボタンが選択されたときにイベントを発生する @Output プロパティ。
@ViewChild("toast")
private toast: IgxToastComponent;
public onSelect(buttongroup){
this.toast.show()
}
//...<igx-buttongroup #MyChild [multiSelection]="!multi" (onSelect)="onSelect($event)"></igx-buttongroup>
<igx-toast #toast message="You have made a selection!"></igx-toast>ボタンが選択解除されたときにイベントを発生する @Output プロパティ。
@ViewChild("toast")
private toast: IgxToastComponent;
public onUnselect(buttongroup){
this.toast.show()
}
//...igx-buttongroup #MyChild [multiSelection]="multi" (onUnselect)="onUnselect($event)"></igx-buttongroup>
<igx-toast #toast message="You have deselected a button!"></igx-toast>ボタン グループのボタンの設定を許可する @Input プロパティ。
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"></igx-buttongroup>igx-buttongroup の配置を返します。
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let buttonAlignment = this.buttonG.alignment;
}ボタン グループの配置の設定を許可します。
利用可能なオプションは、ButtonGroupAlignment.horizontal （デフォルト) と ButtonGroupAlignment.vertical です。
public alignment = ButtonGroupAlignment.vertical;
//..<igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment"></igx-buttongroup>ボタン グループ内のすべてのボタンを含むコレクション。
igx-buttongroup コンポーネントの無効化を許可する @Input プロパティ。デフォルトで false です。
<igx-buttongroup [disabled]="true" [multiSelection]="multi" [values]="fontOptions"></igx-buttongroup>igx-buttongroup コンポーネントの無効化を許可する @Input プロパティ。デフォルトで false です。
<igx-buttongroup [disabled]="true" [multiSelection]="multi" [values]="fontOptions"></igx-buttongroup>コンポーネントのテーマを返します。
デフォルト テーマは comfortable です。
利用可能なオプションは comfortable、cosy、および compact です。
let componentTheme = this.component.displayDensity;コンポーネントのテーマを設定します。
igx-buttongroup の配置が垂直方向の場合に true を返します。
アクセサーが正しく動作するためにプロパティを明示的に設定します。
<igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions">//...
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let orientation = this.buttonG.isVertical;
}IgxButtonGroup の項目コンテンツの CSS クラスを返します。
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let buttonSelect = this.buttonG.itemContentCssClass;
}itemContentCssClass 入力を使用してスタイルの設定を許可します。
値はボタン グループに適用する CSS クラス名になります。
public style1 = "styleClass";
//..<igx-buttongroup [itemContentCssClass]="style1" [multiSelection]="!multi" [values]="alignOptions">選択済みのボタンを取得します。
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let selectedButton = this.buttonG.selectedButtons;
}インデックスでボタンを選択解除します。
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
this.buttonG.deselectButton(2);
this.cdr.detectChanges();
}インデックスでボタンを選択します。
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
this.buttonG.selectButton(2);
this.cdr.detectChanges();
}
Ignite UI for Angular Button Group - ヘルプ
Ignite UI Button Group はボタンのグループを垂直方向または水平方向に表示します。 グループは単一、複数、および切り替え選択をサポートします。 例:
<igx-buttongroup multiSelection="true" [values]="fontOptions"> </igx-buttongroup>以上に表示される
fontOptions値は以下で定義されます。this.fontOptions = [ { icon: 'format_bold', selected: false }, { icon: 'format_italic', selected: false }, { icon: 'format_underlined', selected: false }];