Ignite UI for Angular

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

Class IgxChipComponent

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

Igx Module

IgxChipsModule

Igx Theme

igx-chip-theme

Igx Keywords

chip

Igx Group

表示

備考

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

例

<igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (remove)="chipRemoved($event)">
   <igx-avatar class="chip-avatar-resized" igxPrefix></igx-avatar>
</igx-chip>

実装

  • OnInit
  • OnDestroy

コンストラクター

プロパティ

アクセサー

メソッド

コンストラクター

constructor

プロパティ

animateOnRelease

animateOnRelease: boolean = true

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

例

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

cdr

cdr: ChangeDetectorRef

chipClick

chipClick: EventEmitter<IChipClickEventArgs> = ...

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

例

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

data

data: any

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

例

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

disabled

disabled: boolean = false

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

例

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

document

document: any

dragDirective

dragDirective: IgxDragDirective

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

例

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

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

dragDrop

dragDrop: EventEmitter<IChipEnterDragAreaEventArgs> = ...

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

例

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

dragEnter

dragEnter: EventEmitter<IChipEnterDragAreaEventArgs> = ...

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

例

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

draggable

draggable: boolean = false

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

例

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

dragLeave

dragLeave: EventEmitter<IChipEnterDragAreaEventArgs> = ...

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

例

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

dragOver

dragOver: EventEmitter<IChipEnterDragAreaEventArgs> = ...

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

例

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

hideBaseOnDrag

hideBaseOnDrag: boolean = true

ドラッグされた基本要素の非表示を有効または無効にします。 デフォルトの設定は true です。

例

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

id

id: string = ...

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

例

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

keyDown

keyDown: EventEmitter<IChipKeyDownEventArgs> = ...

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

例

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

moveEnd

moveEnd: EventEmitter<IBaseChipEventArgs> = ...

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

例

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

moveStart

moveStart: EventEmitter<IBaseChipEventArgs> = ...

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

例

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

removable

removable: boolean = false

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

例

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

remove

remove: EventEmitter<IBaseChipEventArgs> = ...

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

例

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

removeIcon

removeIcon: TemplateRef<any>

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

例

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

role

role: string = 'option'

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

例

let chipRole = this.chip.role;

selectable

selectable: boolean = false

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

例

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

selectedChanged

selectedChanged: EventEmitter<IBaseChipEventArgs> = ...

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

例

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

selectedChanging

selectedChanging: EventEmitter<IChipSelectEventArgs> = ...

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

例

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

selectIcon

selectIcon: TemplateRef<any>

チップが選択されたときに適用されるデフォルトのアイコンをオーバーライドします。

例

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

variant

variant:
    | string
    | {
        DANGER: "danger";
        INFO: "info";
        PRIMARY: "primary";
        SUCCESS: "success";
        WARNING: "warning";
    }

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

備考

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

例

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

アクセサー

color

  • get color(): any

  • IgxChipComponent の背景色を返します。

    例

    @ViewChild('myChip')
    public chip: IgxChipComponent;
    ngAfterViewInit(){
        let chipColor = this.chip.color;
    }

    返却 any

  • set color(newColor: any): void

  • IgxChipComponent の背景色を設定します。color プロパティは文字列、rgb、および 16 進数をサポートします。

    例

    <igx-chip #myChip [id]="'igx-chip-1'" [color]="'#ff0000'"></igx-chip>

    パラメーター

    • newColor: any

    返却 void

resourceStrings

selected

  • get selected(): boolean

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

    例

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

    返却 boolean

  • set selected(newValue: boolean): void

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

    例

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

    双方向データ バインディング:

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

    パラメーター

    • newValue: boolean

    返却 void

tabIndex

メソッド

ngOnDestroy

  • ngOnDestroy(): void

  • ディレクティブ、パイプ、またはサービス インスタンスが破棄される直前に呼び出される、カスタム クリーンアップを実行するコールバック メソッド。

    返却 void

ngOnInit

  • ngOnInit(): void

  • デフォルトの変更検出がディレクティブのデータ バインド プロパティを初めてチェックした直後、およびビューまたはコンテンツの子要素がチェックされる前に呼び出されるコールバック メソッド。ディレクティブがインスタンス化されるときに 1 回だけ呼び出されます。

    返却 void

onRemoveMouseDown

onSelectTransitionDone