Chip

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

    Angular Chip の例

    使用方法

    はじめに、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>
    

    選択

    選択は、selectable 入力を true に設定して有効にできます。チップを選択すると、selectedChanging イベントが発生します。新しい 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>
    

    削除

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

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

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

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

    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 のすべての要素がテンプレート化できます。

    IgxPrefixIgxSuffix ディレクティブを使用して、チップの prefixsuffix をテンプレート化できます。

    <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 にも設定できます。

    <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 型の値を受け取り、同じ機能を保持する際にデフォルト アイコンをオーバーライドします。

    <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 型の値を取得してデフォルトの削除アイコンの代わりに描画します。

    <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 のソート

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

    <igx-chips-area (reorder)="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 - igxChipremove イベントをトリガーし、チップ削除が手動で処理されます。

      • SHIFT + LEFT - 現在フォーカスされたチップは左に位置を移動した際に igxChipAreareorder イベントをトリガーします。
      • SHIFT + RIGHT - 現在フォーカスされたチップは右に位置を移動した際に igxChipAreareorder イベントをトリガーします。
    • 削除ボタンがフォーカスされた場合のキーボード コントロール:

      • SPACE または ENTER チップの削除を手動的に処理するために remove 出力を発生します。

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

    <igx-chips-area (reorder)="chipsOrderChanged($event)">
        <igx-chip
        *ngFor="let chip of chipList"
        [id]="chip.id"
        [selectable]="true"
        [selectIcon]="mySelectIcon"
        [removable]="true"
        [removeIcon]="myRemoveIcon"
        (remove)="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-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

    $legacy-supportfalse (デフォルト) に設定されている場合、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

    テーマの依存関係

    参照

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