Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス 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

コンストラクタ

プロパティ

コンストラクタ

constructor

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

プロパティ

cdr

cdr: ChangeDetectorRef

chipsList

chipsList: QueryList<IgxChipComponent>

IgxChipsAreaComponent に IgxChipComponent を保持します。

@例:
ngAfterViewInit(){
   let chips = this.chipsArea.chipsList;
}

element

element: ElementRef

height

height: number

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

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

onMoveEnd

onMoveEnd: EventEmitter<IBaseChipsAreaEventArgs> = new EventEmitter<IBaseChipsAreaEventArgs>()

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

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

onMoveStart

onMoveStart: EventEmitter<IBaseChipsAreaEventArgs> = new EventEmitter<IBaseChipsAreaEventArgs>()

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

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

onReorder

onReorder: EventEmitter<IChipsAreaReorderEventArgs> = new EventEmitter<IChipsAreaReorderEventArgs>()

IgxChipsAreaComponent で IgxChipComponent を並べ替えるときにイベントを発生します。 IgxColumnComponent の配列を返します。

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

onSelection

onSelection: EventEmitter<IChipsAreaSelectEventArgs> = new EventEmitter<IChipsAreaSelectEventArgs>()

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

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

width

width: number

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

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