Chip

Chip コンポーネントは、楕円形のコンテナーに情報を表示する視覚的要素です。コンポーネントにはテンプレート化、削除、選択などのさまざまなプロパティがあります。複数のチップの順序を変更し、チップ領域をコンテナーとして視覚的に接続できます。

Angular Chip の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

はじめに、app.module.ts ファイルに IgxChipsModule をインポートします。

// app.module.ts

...
import { IgxChipsModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxChipsModule],
    ...
})
export class AppModule {}

IgxChipComponent には、id 入力があるため、他のチップと簡単に識別できます。id がない場合は自動的に生成します。

<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
    {{chip.text}}
</igx-chip>

選択

Default Selection

選択は、selectable 入力を true に設定して有効にできます。チップを選択すると、onSelection イベントが発生します。新しい selected 値を提供することにより、新しいステートとこの選択の変更をトリガーした originalEvent の元のイベントを取得できます。selected プロパティをプログラムで設定して行う場合、originalEvent 引数に値 null になります。

<igx-chip *ngFor="let chip of chipList" [selectable]="true">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

削除

Removing

削除は、removable 入力を true に設定して有効にできます。有効な場合は、チップの最後に削除ボタンが描画されます。チップを削除すると、onRemove イベントが発生します。

デフォルトで、チップは削除アイコンをクリックしても DOM ツリーから自動的に削除されません。削除は手動で処理する必要があります。

<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (onRemove)="chipRemoved($event)">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

ドラッグ

ドラッグは、draggable 入力を true に設定して有効にできます。有効にすると、チップをクリックしてドラッグできます。

<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {chip.text}}
</igx-chip>

Note

チップの順序をソートするには、IgxChipsAreaComponent を使用してイベントを処理する必要があります。

デモサンプルを作成するには、上記の機能を使用します。

<igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[removable]="true"
(onRemove)="chipRemoved($event)"
>
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

次に、chipList と onRemove イベントを処理する関数を追加します。

import { IBaseChipEventArgs } from "igniteui-angular";
...
public chipList = [
    {
        text: "Country",
        id: "1",
        icon: "place"
    },
    {
        text: "City",
        id: "2",
        icon: "location_city"
    },
    {
        text: "Town",
        id: "3",
        icon: "store"
    },
    {
        text: "First Name",
        id: "4",
        icon: "person_pin"
    }
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

すべて適切に設定できると、ブラウザーで以下が表示されます。

Chip テンプレート

IgxChipComponent のすべての要素がテンプレート化できます。

IgxPrefix と IgxSuffix ディレクティブを使用して、チップの prefix と suffix をテンプレート化できます。

Prefix and Suffix

<igx-chip>
    <igx-icon igxPrefix>insert_emoticon</igx-icon>
    <igx-icon igxSuffix style="transform: rotate(180deg)">insert_emoticon</igx-icon>
    <span>Why not both?</span>
</igx-chip>

チップのサイズは、displayDensity 入力を使用してカスタマイズできます。デフォルトの設定は comfortable です。チップ内のすべてが相対位置を保持する際に cosy または compact にも設定できます。

Density

<igx-chip>Hi! My name is Chip!</igx-chip>

<igx-chip displayDensity="cosy">
    I can be smaller!
</igx-chip>

<igx-chip displayDensity="compact">
    <igx-icon igxPrefix>child_care</igx-icon>
    Even tiny!
</igx-chip>

select icon をカスタマイズするには、selectIcon 入力を使用します。TemplateRef 型の値を受け取り、同じ機能を保持する際にデフォルトアイコンをオーバーライドします。

Custom Selection

<igx-chip *ngFor="let chip of chipList" [selectable]="true" [selectIcon]="mySelectIcon">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

<ng-template #mySelectIcon>
    <igx-icon>check_circle</igx-icon>
</ng-template>

remove icon をカスタマイズするには、removeIcon 入力を使用します。TemplateRef 型の値を取得してデフォルトの削除アイコンの代わりに描画します。

Remove icons

<igx-chip *ngFor="let chip of chipList"  [removable]="true" [removeIcon]="myRemoveIcon">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

<ng-template #myRemoveIcon>
    <igx-icon>delete</igx-icon>
</ng-template>

Chip Area

IgxChipsAreaComponent はチップの間の操作 (ドラッグ、選択、ナビゲーションなど) が必要となる複雑なシナリオの処理で使用されます。

Chip のソート

Dragging

チップの位置を変更するため、ユーザーによってドラッグができます。ドラッグはデフォルトで無効になっていますが、draggable 入力プロパティを使用して有効にできます。実際のチップのソートは手動で処理する必要があります。チップが別のチップの上にドラッグされる場合に、新しい順序を返す onReorder イベントを提供するため、チップ領域が役に立ちます。

<igx-chips-area (onReorder)="chipsOrderChanged($event)">
    <igx-chip *ngFor="let chip of chipList" [draggable]="'true'">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        {{chip.text}}
    </igx-chip>
</igx-chips-area>

public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}

キーボードナビゲーション

チップをフォーカスするには Tab キーを押すか、それをクリックします。チップがチップ領域にある場合、キーボードナビゲーションを使用して順序を変更することができます。

チップがフォーカスされた場合のキーボードコントロール:
- LEFT - チップのフォーカスを左へ移動します。
- RIGHT - チップのフォーカスを右へ移動します。
- SPACE - チップが選択可能な場合、選択を切り替えます。
- DELETE - igxChip の onRemove イベントをトリガーし、チップ削除が手動で処理されます。
- SHIFT + LEFT - 現在フォーカスされたチップは左に位置を移動した際に igxChipArea の onReorder イベントをトリガーします。
- SHIFT + RIGHT - 現在フォーカスされたチップは右に位置を移動した際に igxChipArea の onReorder イベントをトリガーします。
削除ボタンがフォーカスされた場合のキーボードコントロール:
- SPACE または ENTER チップの削除を手動的に処理するために onRemove 出力を発生します。

以下は、IgxAvatar をプレフィックスとして使用し、すべてのチップにカスタムアイコンを使用するチップ領域の例です。

<igx-chips-area (onReorder)="chipsOrderChanged($event)">
    <igx-chip
    *ngFor="let chip of chipList"
    [id]="chip.id"
    [selectable]="true"
    [selectIcon]="mySelectIcon"
    [removable]="true"
    [removeIcon]="myRemoveIcon"
    (onRemove)="chipRemoved($event)"
    [draggable]="'true'">
        <igx-avatar
        class="chip-avatar-resized"
        igxPrefix
        [src]="chip.photo"
        roundShape="true"
        ></igx-avatar>
        {{chip.name}}
    </igx-chip>
</igx-chips-area>

<ng-template #mySelectIcon>
    <igx-icon>check_circle</igx-icon>
</ng-template>

<ng-template #myRemoveIcon>
    <igx-icon>delete</igx-icon>
</ng-template>

チップに合わせてアバターのサイズを変更します。

.chip-avatar-resized {
    width: 2em;
    height: 2em;
    min-width: 2em;
}

chipList とイベントを処理する関数を追加します。

import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from "igniteui-angular";
...
public chipList = [
    {
        id: "770-504-2217",
        name: "Terrance Orta",
        photo: "https://www.infragistics.com/angular-demos/assets/images/men/27.jpg"
    },
    {
        id: "423-676-2869",
        name: "Richard Mahoney",
        photo: "https://www.infragistics.com/angular-demos/assets/images/men/13.jpg"
    },
    {
        id: "859-496-2817",
        name: "Donna Price",
        photo: "https://www.infragistics.com/angular-demos/assets/images/women/50.jpg"
    }
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}

すべてが適切に設定されていれば、ブラウザーで以下が表示されます。

デモ

スタイル設定

チップのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する index ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-chip-themeを拡張する新しいテーマを作成し、チップの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。

$custom-theme: igx-chip-theme(
    $background: #011627,
    $hover-background:  #011627dc,
    $focus-background: #0116276c,
    $selected-background: #ECAA53,
    $hover-selected-background: #ECAA53,
    $focus-selected-background: #ECAA53,
    $text-color: #FEFEFE,
    $remove-icon-color: #f14545,
    $remove-icon-color-focus: #da0000,
    $border-radius: 5px
);

テーマを含む

最後にコンポーネントのテーマをアプリケーションに含めます。

$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

 @include igx-chip($custom-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include igx-chip($custom-theme);
    }
}

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

@include igx-css-vars($custom-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバルセレクターが必要なため、:host を使用する必要があります。

:host {
    @include igx-css-vars($custom-theme);
}

デモ

既知の問題と制限

IE11 で Chips Area コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。
```
import 'core-js/es7/array';
```

API

参照

コミュニティに参加して新しいアイデアをご提案ください。

Chip

Angular Chip の例

使用方法

選択

削除

ドラッグ

Note

Chip テンプレート

Chip Area

Chip のソート

キーボード ナビゲーション

デモ

スタイル設定

テーマを含む

Note

Note

デモ

既知の問題と制限

API

参照

テーマ設定

キーボードナビゲーション