要素が解放されたときにドラッグ可能な要素のアニメーションを有効/無効にする @Input プロパティ。 デフォルトの設定は true です。
<igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>
IgxChipComponent がクリックされたときにイベントを発生します。
クリックした IgxChipComponent およびイベントをキャンセルするかどうかを返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (click)="chipClick($event)">
チップに関連するデータを保存する @Input プロパティ。
<igx-chip [data]="{ value: 'Country' }"></igx-chip>
IgxChipComponent が無効かどうかを定義する @Input プロパティ。
無効な場合、クリックまたはタブでフォーカス、クリックまたはスペースで選択、ドラッグなどのユーザー インタラクションを制限します。
デフォルトの設定は false です。
<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>
IgxDragDirective がドラッグ動作のために使う IgxChipComponent の参照を含むプロパティ。
<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
onMoveStart(event: IBaseChipEventArgs){
let dragDirective = event.owner.dragDirective;
}
IgxChipComponent が IgxChipsAreaComponent にドロップされたときにイベントを発生します。
ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント
引数を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragDrop)="chipLeave($event)">
IgxChipComponent が IgxChipsAreaComponent に入ったときにイベントを発生します。
ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント
引数を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragEnter)="chipEnter($event)">
IgxChipComponent が IgxChipsAreaComponent を離れたときにイベントを発生します。
ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント
引数を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragLeave)="chipLeave($event)">
IgxChipComponent が IgxChipsAreaComponent の上にあるときにイベントを発生します。
ターゲットの IgxChipComponent、ドラッグしている IgxChipComponent、および元のドロップ イベント
引数を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (dragOver)="chipOver($event)">
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、イベントをキャンセルするかどうか、
alt、shift または control キーが押されたかどうか、押されたキーの名前を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (keyDown)="chipKeyDown($event)">
IgxChipComponent 移動が終了するときにイベントを発生します。
移動した IgxChipComponent を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveEnd)="moveEnded($event)">
IgxChipComponent の移動が開始するときにイベントを発生します。
移動している IgxChipComponent を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (moveStart)="moveStarted($event)">
IgxChipComponent が [削除] ボタンを描画し、削除イベントを発生するかどうかを定義する @Input プロパティ。
デフォルトの設定は false です。
<igx-chip [id]="'igx-chip-1'" [draggable]="true" [removable]="true"></igx-chip>
IgxChipComponent 削除されたときにイベントを発生します。
削除した IgxChipComponent を返します。
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (remove)="remove($event)">
チップが [削除] ボタンに適用するデフォルト アイコンをオーバーライドする @Input プロパティ。
<igx-chip [id]="chip.id" [removable]="true" [removeIcon]="iconTemplate"></igx-chip>
<ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>
チップの role 属性を返します。
let chipRole = this.chip.role;
選択時にチップが適用するデフォルト アイコンをオーバーライドする @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 が選択/選択解除され、関連するアニメーションとトランジションが終了すると、イベントが発生します。
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanged)="chipSelectEnd($event)">
IgxChipComponent が選択/選択解除されたときにイベントを発生します。
選択したチップへの参照、イベントをキャンセルするかどうか、次の選択状態を返します。
イベントがインタラクションでトリガーされた場合に originalEvent が提供されます。それ以外の場合、originalEvent は null です。
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (selectedChanging)="chipSelect($event)">
チップのバリアントを設定または取得します。
有効な値は primary、info、success、warning および danger です。
無効な値を指定してもチップは変更されません。
<igx-chip [variant]="success"></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>
バージョン 16.1.x 以降。
--ig-size CSS カスタム プロパティを使用してください。
コンポーネントのテーマを返します。
デフォルトのテーマは comfortable です。
利用可能なオプションは comfortable、cosy、または compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
リソース文字列を返すアクセサー。
リソース文字列を設定するアクセサー。 デフォルトで EN リソースを使用します。
IgxChipComponent が選択されるているかどうかを返します。
@ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
let selectedChip = this.chip.selected;
}
IgxChipComponent の選択状態を設定します。
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">
双方向データ バインディング:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
tabindex 属性の値を設定する @Input プロパティ。指定されていない場合は、要素の tabindex (設定した場合) が使用されます。
<igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>
表示密度の値に基づいて --component-size CSS 変数を設定します。
Chip は情報を小さな楕円内に表示する視覚的なコンポーネントです。
Igx Module
IgxChipsModule
Igx Theme
igx-chip-theme
Igx Keywords
chip
Igx Group
表示
Remarks
Ignite UI Chip をテンプレート化、削除、または選択できます。 複数の Chip を順序変更し、視覚的に接続できます。 Chip は「チップ領域」と呼ばれるコンテナーに配置され、このコンテナーは Chip の間の操作を管理します。
Example