チップに関連するデータを保存する @Input プロパティ。
<igx-chip [data]="{ value: 'Country' }"></igx-chip>IgxChipComponent が無効かどうかを定義する @Input プロパティ。
無効な場合、クリックまたはタブでフォーカス、クリックまたはスペースで選択、ドラッグなどのユーザー インタラクションを制限します。
デフォルトで false に設定されます。
<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>IgxChipComponent がドラッグ動作のために使う IgxDragDirective の参照を含むプロパティ。
<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>onMoveStart(event: IBaseChipEventArgs){
let dragDirective = event.owner.dragDirective;
}IgxChipComponent の位置を変更するためにドラッグできるかどうかを定義する @Input プロパティ。
デフォルトで false に設定されます。
<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>ドラッグされた基本要素の非表示を有効または無効にする @Input プロパティ。 デフォルトで true に設定されます。
<igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip>id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。
<igx-chip [id]="'igx-chip-1'"></igx-chip>IgxChipComponent がクリックされたときにイベントを発生します。
クリックした IgxChipComponent およびイベントをキャンセルするかどうかを返します。
chipClick(event: IChipClickEventArgs){
let clickedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onClick)="chipClick($event)">IgxChipComponent が IgxChipsAreaComponent に入ったときにイベントを発生します。
ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント引数を返します。
chipEnter(event: IChipEnterDragAreaEventArgs){
let targetChip = event.targetChip;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onDragEnter)="chipEnter($event)">IgxChipComponent のキーボード ナビゲーションが使用されるときにイベントを発生します。
フォーカス/選択した IgxChipComponent、イベントをキャンセルするかどうかを返します。
Alt、shift、control、shift、control キーが押されていてキー名が押されたかどうか。
chipKeyDown(event: IChipKeyDownEventArgs){
let keyDown = event.key;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onKeyDown)="chipKeyDown($event)">IgxChipComponent の移動が終了するときにイベントを発生します。
移動した IgxChipComponent を返します。
moveEnded(event: IBaseChipEventArgs){
let movedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveEnd)="moveEnded($event)">IgxChipComponent の移動が開始するときにイベントを発生します。
移動している IgxChipComponent を返します。
moveStarted(event: IBaseChipEventArgs){
let movingChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveStart)="moveStarted($event)">IgxChipComponent が削除されたときにイベントを発生します。
Returns the removed IgxChipComponent.
remove(event: IBaseChipEventArgs){
let removedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onRemove)="remove($event)">IgxChipComponent が選択/選択解除されたときにイベントを発生します。
選択したチップへの参照、イベントをキャンセルするかどうか、次の選択状態を返します。
イベントがインタラクションでトリガーされた場合に originalEvent が提供されます。それ以外の場合、originalEvent は null です。
chipSelect(event: IChipSelectEventArgs){
let selectedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelection)="chipSelect($event)">IgxChipComponent が選択/選択解除され、関連するアニメーションとトランジションが終了すると、イベントが発生します。
chipSelectEnd(event: IBaseChipEventArgs){
let selectedChip = event.owner;
}<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelectionDone)="chipSelectEnd($event)">IgxChipComponent が [削除] ボタンを描画し、削除イベントを発生するかどうかを定義する @Input プロパティ。
デフォルトで false に設定されます。
<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip>チップが削除ボタンに適用するデフォルト アイコンをオーバーライドする @Input プロパティ。
<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>選択時にチップが適用するデフォルト アイコンをオーバーライドする @Input プロパティ。
<igx-chip [id]="chip.id" [selectable]="true" [selectIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template>IgxChipComponent がクリックまたはナビゲーションで選択可能かどうかを定義する @Input プロパティ。
デフォルトで false に設定されます。
<igx-chip [id]="chip.id" [draggable]="true" [removable]="true" [selectable]="true"></igx-chip>IgxChipComponent の背景色を返します。
@ViewChild('myChip')
public chip: IgxChipComponent;
ngAfterViewInit(){
let chipColor = this.chip.color;
}IgxChipComponent の背景色を設定する @Input プロパティ。
color プロパティは文字列、rgb、および16 進数をサポートします。
<igx-chip #myChip [id]="'igx-chip-1'" [color]="'#ff0000'"></igx-chip>コンポーネントのテーマを返します。
デフォルト テーマは comfortable です。
利用可能なオプションは comfortable、cosy、および compact です。
let componentTheme = this.component.displayDensity;コンポーネントのテーマを設定します。
IgxChipComponent が選択されるかどうかを返します。
@ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
let selectedChip = this.chip.selected;
}双方向データ バインディング:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">IgxChipComponent の選択状態を設定します。
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">双方向データ バインディング:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
要素が解放されたときにドラッグ可能な要素のアニメーションを有効/無効にする @Input プロパティ。 デフォルトで true に設定されます。
<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>