要素が解放されたときにドラッグ可能な要素のアニメーションを有効/無効にする

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>
Copy

IgxChipComponent がクリックされたときにイベントを発生します。 クリックした IgxChipComponent およびイベントをキャンセルするかどうかを返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (click)="chipClick($event)">
Copy

チップに関連するデータを保存する

Example

<igx-chip [data]="{ value: 'Country' }"></igx-chip>
Copy

IgxChipComponent を無効にします。無効な場合、クリックまたはタブでフォーカス、クリックまたはスペースで選択、ドラッグなどのユーザー インタラクションを制限します。 デフォルトの設定は false です。

例

<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>
Copy

IgxDragDirective がドラッグ動作のために使う IgxChipComponent の参照を含むプロパティです。

例

<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
Copy

onMoveStart(event: IBaseChipEventArgs){
    let dragDirective = event.owner.dragDirective;
}
Copy

IgxChipComponent が IgxChipsAreaComponent にドロップされたときにイベントを発生します。ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント引数を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)">
Copy

IgxChipComponent が IgxChipsAreaComponent に入ったときにイベントを発生します。ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント引数を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)">
Copy

IgxChipComponent が IgxChipsAreaComponent を離れたときにイベントを発生します。 ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント引数を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)">
Copy

IgxChipComponent が IgxChipsAreaComponent の上にあるときにイベントを発生します。 ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント引数を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)">
Copy

IgxChipComponent の位置を変更するためにドラッグできるかどうかを定義します。 デフォルトの設定は false です。

例

<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>
Copy

ドラッグされた基本要素の非表示を有効または無効にする

Example

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip>
Copy

id 属性の値を設定します。提供されていない場合は、自動的に生成されます。

例

<igx-chip [id]="'igx-chip-1'"></igx-chip>
Copy

IgxChipComponent のキーボード ナビゲーションが使用されるときにイベントを発生します。フォーカス/選択された IgxChipComponent、イベントをキャンセルするかどうか、 alt、shift または control キーが押されたかどうか、押されたキーの名前を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (keyDown)="chipKeyDown($event)">
Copy

IgxChipComponent 移動が終了するときにイベントを発生します。移動した IgxChipComponent を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveEnd)="moveEnded($event)">
Copy

IgxChipComponentの移動が開始するときにイベントを発生します。移動している IgxChipComponent を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveStart)="moveStarted($event)">
Copy

IgxChipComponent が [削除] ボタンを描画し、削除イベントを発生するかどうかを定義します。 デフォルトの設定は false です。

例

<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip>
Copy

IgxChipComponent 削除されたときにイベントを発生します。削除した IgxChipComponent を返します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)">
Copy

チップが [削除] ボタンに適用するデフォルト アイコンをオーバーライドする

Example

<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>
Copy

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

例

let chipRole = this.chip.role;
Copy

選択時にチップが適用するデフォルト アイコンをオーバーライドする

Example

<igx-chip [id]="chip.id" [selectable]="true" [selectIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template>
Copy

IgxChipComponent がクリックまたはナビゲーションで選択可能かどうかを定義します。 デフォルトの設定は false です。

例

<igx-chip [id]="chip.id" [draggable]="true" [removable]="true" [selectable]="true"></igx-chip>
Copy

IgxChipComponent が選択/選択解除され、関連するアニメーションとトランジションが終了すると、イベントが発生します。

例

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanged)="chipSelectEnd($event)">
Copy

IgxChipComponent が選択/選択解除されたときにイベントを発生します。 選択したチップへの参照、イベントをキャンセルするかどうか、次の選択状態を返します。イベントがインタラクションでトリガーされた場合に originalEvent が提供されます。それ以外の場合、originalEvent は null です。

例

<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)">
Copy

チップのバリアントを設定または取得します。

備考

有効な値は primary、info、success、warning および danger です。 無効な値を指定してもチップは変更されません。

例

<igx-chip [variant]="success"></igx-chip>
Copy