Angular Chip (チップ) コンポーネントの概要

[Angular Chip コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html)は、楕円形のコンテナーに情報を表示する視覚的要素です。コンポーネントにはテンプレート化、削除、選択などのさまざまなプロパティがあります。複数のチップの順序を変更し、チップ領域をコンテナーとして視覚的に接続できます。

Angular Chip の例

Ignite UI for Angular Chip を使用した作業の開始

Ignite UI for Angular Chip コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

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

// app.module.ts

import { IgxChipsModule } from 'igniteui-angular';
// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxChipComponent をスタンドアロンの依存関係としてインポートすることも、IGX_CHIPS_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular';
import { NgFor } from '@angular/common';
// import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
        {{chip.text}}
    </igx-chip>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CHIPS_DIRECTIVES, NgFor]
})
export class HomeComponent {
    public chipList = [
        { text: 'Country', id: '1', icon: 'place' },
        { text: 'City', id: '2', icon: 'location_city' },
        { text: 'Address', id: '3', icon: 'home' },
        { text: 'Street', id: '4', icon: 'streetview' }
    ];
}

Ignite UI for Angular Chips モジュールまたはディレクティブをインポートしたので、igx-chip コンポーネントの使用を開始できます。

Angular Chip コンポーネントの使用

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>

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

import { IBaseChipEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
...
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 をテンプレート化できます。

<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>

[--ig-size] CSS 変数を使用して、チップのサイズをカスタマイズできます。デフォルトでは、var(--ig-size-large) に設定されています。var(--ig-size-medium) または var(--ig-size-small) に設定することもできますが、チップ内のすべての要素は相対的な位置を保持します。

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

<igx-chip style="--ig-size: var(--ig-size-medium)">
    I can be smaller!
</igx-chip>

<igx-chip style="--ig-size: var(--ig-size-small)">
    <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 - igxChip の remove イベントをトリガーし、チップ削除が手動で処理されます。
- SHIFT + LEFT - 現在フォーカスされたチップは左に位置を移動した際に igxChipArea の reorder イベントをトリガーします。
- SHIFT + RIGHT - 現在フォーカスされたチップは右に位置を移動した際に igxChipArea の reorder イベントをトリガーします。
削除ボタンがフォーカスされた場合のキーボードコントロール:
- 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"
        shape="circle"
        ></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';
// import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package

...
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 ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-theme: 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 chip($custom-theme);

Note

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

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

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

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

Note

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

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

デモ

カスタムサイズ変更

igx-chip を直接ターゲットとして --size 変数を使用することができます。

igx-chip {
  --size: 50px;
}

または、ユニバーサル変数 --igx-chip-size を使用して、すべてのインスタンスをターゲットにすることもできます。

<div class="my-app">
  <igx-chip></igx-chip>
</div>

.my-app {
  --igx-chip-size: 50px;
}

事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

igx-chip {
    --ig-size: var(--ig-size-small);
}

詳細については、サイズの記事をご覧ください。

既知の問題と制限

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

API

テーマの依存関係

IgxIcon テーマ

参照

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

Angular Chip (チップ) コンポーネントの概要

Angular Chip の例

Ignite UI for Angular Chip を使用した作業の開始

Angular Chip コンポーネントの使用

選択

削除

ドラッグ

Note

Chip テンプレート

Chip Area

Chip のソート

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

デモ

スタイル設定

テーマを含む

Note

Note

デモ

カスタム サイズ変更

既知の問題と制限

API

テーマの依存関係

参照

テーマ設定

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

カスタムサイズ変更