ボタンが選択解除されたときにイベントを発生する
プロパティです。
@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 属性の値を設定する @Input プロパティです。設定されていない場合、自動的に生成されます。
<igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
ボタンが選択されたときにイベントを発生する
プロパティです。
@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>
ボタン グループのボタンの設定を許可する
プロパティです。
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>
igx-buttongroup の配置を返します。
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let buttonAlignment = this.buttonG.alignment;
}
ボタン グループの配置の設定を許可します。
使用可能なオプションは ButtonGroupAlignment.horizontal (デフォルト) と ButtonGroupAlignment.vertical です。
public alignment = ButtonGroupAlignment.vertical;
//..
<igx-buttongroup [selectionMode]="'single'" [values]="cities" [alignment]="alignment"></igx-buttongroup>
ボタン グループ内のすべてのボタンを含むコレクションです。
igx-buttongroup コンポーネントの無効化を許可する
プロパティです。デフォルトで false です。
<igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
バージョン 16.1.x 以降。
--ig-size CSS カスタム プロパティを使用してください。
コンポーネントのテーマを返します。
デフォルトのテーマは 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" [selectionMode]="'multi'" [values]="alignOptions">
バージョン 16.1.0。代わりに、selectionMode プロパティを設定/使用してください。
ボタンの複数選択を有効にします。デフォルトで、複数選択は false です。
選択済みのボタンを取得します。
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let selectedButton = this.buttonG.selectedButtons;
}
ボタンの選択モード 'single'、'singleRequired'、または 'multi' を取得/設定する
プロパティです。デフォルトでは、選択モードは 'single' です。
<igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
表示密度の値に基づいて --component-size CSS 変数を設定します。
Ignite UI for Angular Button Group - ヘルプ
Ignite UI Button Group はボタンのグループを垂直方向または水平方向に表示します。 グループは single、multi、および singleRequired 選択をサポートします。
例:
以上に表示される
fontOptions値は以下で定義されます。