クラス IgxChipsAreaComponent

チップ領域により、ドラッグ、選択、移動などの操作を必要とするチップを使用して、より複雑なシナリオを実行できます。

igxmodule

IgxChipsModule

igxtheme

igx-chip-theme

igxkeywords

chip area, chip

igxgroup

display

例:
<igx-chips-area>
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
<span>{{chip.text}}</span>
</igx-chip>
</igx-chips-area>

階層

  • IgxChipsAreaComponent

実装

  • DoCheck
  • AfterViewInit
  • OnDestroy

Index

コンストラクタ

  • new IgxChipsAreaComponent(cdr: ChangeDetectorRef, element: ElementRef<any>, _iterableDiffers: IterableDiffers): IgxChipsAreaComponent

プロパティ

ariaLabel: string = 'chip area'

チップ領域の aria-label 属性を返します。

例:
let ariaLabel = this.chipsArea.ariaLabel;
cdr: ChangeDetectorRef
chipsList: QueryList<IgxChipComponent>

IgxChipsAreaComponentIgxChipComponent を保持します。

例:
ngAfterViewInit(){
let chips = this.chipsArea.chipsList;
}
element: ElementRef<any>
height: number

An @Input property that sets the height of the IgxChipsAreaComponent.

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>
moveEnd: EventEmitter<IBaseChipsAreaEventArgs> = ...

IgxChipsAreaComponentIgxChipComponent が移動された後にイベントを発生します。

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveEnd)="moveEnd($event)"></igx-chips-area>
moveStart: EventEmitter<IBaseChipsAreaEventArgs> = ...

IgxChipsAreaComponentIgxChipComponent が移動されているときにイベントを発生します。

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (moveStart)="moveStart($event)"></igx-chips-area>
reorder: EventEmitter<IChipsAreaReorderEventArgs> = ...

IgxChipsAreaComponentIgxChipComponent をソートするときにイベントを発生します。 IgxColumnComponent の配列を返します。

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="changedOrder($event)"></igx-chips-area>
role: string = 'listbox'

チップ領域の role 属性を返します。

例:
let chipsAreaRole = this.chipsArea.role;
selectionChange: EventEmitter<IChipsAreaSelectEventArgs> = ...

IgxChipsAreaComponentIgxChipComponent が選択/選択解除されたときにイベントを発生します。 初期ときに選択されたチップがある場合もチップ領域が初期化された後に発生されます。 選択済み IgxChipComponent の配列および IgxChipAreaComponent を返します。

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (selectionChange)="selection($event)"></igx-chips-area>
width: number

IgxChipsAreaComponent の幅を設定する @Input プロパティ。

例:
<igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="chipsOrderChanged($event)"></igx-chips-area>