Ignite UI for Angular

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

クラス IgxChipComponent

igxChip は情報を小さな楕円内に表示する視覚的なコンポーネントです。

@igxmodule

IgxChipsModule

@igxtheme

igx-chip-theme

@igxkeywords

chip

@igxgroup

display

@備考:

Ignite UI Chip をテンプレート化、削除、または選択できます。 複数の Chip を順序変更し、視覚的に接続できます。 Chip は「チップ領域」と呼ばれるコンテナーに配置され、このコンテナーは Chip の間の操作を管理します。

@例:
<igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (onRemove)="chipRemoved($event)">
   <igx-avatar class="chip-avatar-resized" igxPrefix fontSet="material" roundShape="true"></igx-avatar>
</igx-chip>

階層

実装

  • DoCheck
  • OnInit

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

animateOnRelease

animateOnRelease: boolean = true

要素が解放されたときにドラッグ可能な要素のアニメーションを有効/無効にする @Input プロパティ。 デフォルトの設定は true です。

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

cdr

cdr: ChangeDetectorRef

data

data: any

チップに関連するデータを保存する @Input プロパティ。

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

disabled

disabled: boolean = false

IgxChipComponent が無効かどうかを定義する @Input プロパティ。無効な場合、クリックまたはタブでフォーカス、クリックまたはスペースで選択、ドラッグなどのユーザー インタラクションを制限します。 デフォルトの設定は false です。

@例:
<igx-chip [id]="chip.id" [disabled]="true"></igx-chip>

dragDirective

dragDirective: IgxDragDirective

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

@例:
<igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
onMoveStart(event: IBaseChipEventArgs){
    let dragDirective = event.owner.dragDirective;
}

draggable

draggable: boolean = false

IgxChipComponent の位置を変更するためにドラッグできるかどうかを定義する @Input プロパティ。 デフォルトの設定は false です。

@例:
<igx-chip [id]="'igx-chip-1'" [draggable]="true"></igx-chip>

elementRef

elementRef: ElementRef

hideBaseOnDrag

hideBaseOnDrag: boolean = true

ドラッグされた基本要素の非表示を有効または無効にする @Input プロパティ。 デフォルトの設定は true です。

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

id

id: string = `igx-chip-${CHIP_ID++}`

id 属性の値を設定する @Input プロパティ。提供されていない場合は、自動的に生成されます。

@例:
<igx-chip [id]="'igx-chip-1'"></igx-chip>

onClick

onClick: EventEmitter<IChipClickEventArgs> = new EventEmitter<IChipClickEventArgs>()

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onClick)="chipClick($event)">

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onDragEnter

onDragEnter: EventEmitter<IChipEnterDragAreaEventArgs> = new EventEmitter<IChipEnterDragAreaEventArgs>()

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onDragEnter)="chipEnter($event)">

onKeyDown

onKeyDown: EventEmitter<IChipKeyDownEventArgs> = new EventEmitter<IChipKeyDownEventArgs>()

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onKeyDown)="chipKeyDown($event)">

onMoveEnd

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

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveEnd)="moveEnded($event)">

onMoveStart

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

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onMoveStart)="moveStarted($event)">

onRemove

onRemove: EventEmitter<IBaseChipEventArgs> = new EventEmitter<IBaseChipEventArgs>()

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

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

onSelection

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

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelection)="chipSelect($event)">

onSelectionDone

onSelectionDone: EventEmitter<IBaseChipEventArgs> = new EventEmitter<IBaseChipEventArgs>()

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

@例:
<igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelectionDone)="chipSelectEnd($event)">

removable

removable: boolean = false

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

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

removeIcon

removeIcon: TemplateRef<any>

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

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

selectIcon

selectIcon: TemplateRef<any>

選択時にチップが適用するデフォルト アイコンをオーバーライドする @Input プロパティ。

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

selectable

selectable: boolean = false

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

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

アクセサー

color

  • get color(): any
  • set color(newColor: any): void

displayDensity

selected

  • get selected(): boolean
  • set selected(newValue: boolean): void

  • IgxChipComponent が選択されるかどうかを返します。

    @例:
    @ViewChild('myChip')
public chip: IgxChipComponent;
selectedChip(){
    let selectedChip = this.chip.selected;
}

    返却 boolean

  • IgxChipComponent の選択状態を設定します。

    @例:
    <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">

    Two-way data binding:

    <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">

    パラメーター

    • newValue: boolean

    返却 void

tabIndex

  • get tabIndex(): number
  • set tabIndex(value: number): void

  • tabindex 属性の値を設定する @Input プロパティ。指定されていない場合は、要素の tabindex (設定した場合) が使用されます。

    @例:
    <igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>

    返却 number

  • tabindex 属性の値を設定する @Input プロパティ。指定されていない場合は、要素の tabindex (設定した場合) が使用されます。

    @例:
    <igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>

    パラメーター

    • value: number

    返却 void

メソッド

ngDoCheck

  • ngDoCheck(): void

onRemoveMouseDown

  • onRemoveMouseDown(event: PointerEvent | MouseEvent): void

onSelectTransitionDone

  • onSelectTransitionDone(event: any): void