クラス IgxButtonGroupComponent

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 }];

階層

実装

  • DoCheck
  • OnInit
  • AfterContentInit
  • AfterViewInit
  • OnDestroy

コンストラクタ

constructor

プロパティ

id

id: string = `igx-buttongroup-${NEXT_ID++}`

id 属性の値を設定する @Input プロパティ。設定されていない場合、自動的に生成されます。

 <igx-buttongroup [id]="'igx-dialog-56'" [multiSelection]="!multi" [values]="alignOptions">

multiSelection

multiSelection: boolean = false

複数のボタンの選択を有効にする @Input プロパティ。デフォルトで、複数選択は false です。

<igx-buttongroup [multiSelection]="false" [alignment]="alignment"></igx-buttongroup>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onSelect

onSelect: EventEmitter<IButtonGroupEventArgs> = new EventEmitter<IButtonGroupEventArgs>()

ボタンが選択されたときにイベントを発生する @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>

onUnselect

onUnselect: EventEmitter<IButtonGroupEventArgs> = new EventEmitter<IButtonGroupEventArgs>()

ボタンが選択解除されたときにイベントを発生する @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>

values

values: any

ボタン グループのボタンの設定を許可する @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>

アクセサー

alignment

buttons

disabled

  • get disabled(): boolean
  • set disabled(value: boolean): void

displayDensity

isVertical

  • 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

itemContentCssClass

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

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

    返却 string

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

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

    パラメーター

    • value: string

    返却 void

selectedButtons

メソッド

deselectButton

  • deselectButton(index: number): void

ngDoCheck

  • ngDoCheck(): void

selectButton

  • selectButton(index: number): void