Chip

IgxChip は情報を小さな楕円内に表示する視覚的なコンポーネントです。Chip は、テンプレート化、削除、選択が可能で複数の Chip の順序を変更して視覚的に接続することもできます。Chip は「チップ領域」と呼ばれるコンテナーに配置され、このコンテナーは Chip の間の操作を管理します。

デモ


Chip の初期化

IgxChipComponent はチップ要素のメイン クラスで IgxChipsAreaComponent はチップ領域のメイン クラスです。チップ領域はチップの間の操作 (ドラッグ、選択、ナビゲーションなど) が必要の複雑なシナリオの処理で使用されます。IgxChipComponent](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxchipcomponent.html) には、id 入力があるため、他のチップと簡単に識別できます。id がない場合は自動的に生成します。

igxChipigxChipArea と使用した例:

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

Chip states:

Default Hover Focus

機能

選択

Default Selection

セクションは入力 selectable を設定して有効にできます。チップをクリックするか、チップを Tab キーによってフォーカスして Space キーを押すと選択できます。選択されたチップをクリックするか、チップがフォーカスされる場合に Space キーを押すと選択解除できます。

イベント onSelection は、igxChip 変更の選択ステートが変更されたときに発生されます。新しい selected 値を提供することにより、新しいステートとこの選択の変更をトリガーした originalEvent の元のイベントを取得できます。インタラクションによって行わない場合は selected をコードで設定します。originalEvent 引数に値 null があります。

デフォルトでアイコンがチップが選択されていることを示します。詳細なカスタマイズが可能で selectIcon 入力によって行うことができます。型 TemplateRef の値を受け取り、同じ機能を保持する際にデフォルト アイコンをオーバーライドします。

選択アイコンのカスタマイズ例:

Custom Selection

<igx-chips-area #chipsArea>
    <igx-chip *ngFor="let chip of chipList" [selectable]="'true'" [selectIcon]="mySelectIcon">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        <span>{{chip.text}}</span>
    </igx-chip>
</igx-chips-area>
<ng-template #mySelectIcon>
    <igx-icon fontSet="fa-solid" name="fa-check-circle"></igx-icon>
</ng-template>

削除

Removing

削除は、removable 入力を true に設定して有効にできます。有効な場合は、チップの最後に削除ボタンが描画されます。チップのフォーカス時に削除ボタンのクリックまたは Delete キーの押下などエンドユーザーがインタラクションを実行した場合、 onRemove イベントが発生されます。

チップはユーザーがチップを削除したい場合に自体をデフォルトでテンプレートから削除しません。onRemove イベントを使用して手動で対応する必要があります。

削除アイコンをカスタマイズする必要がある場合、removeIcon 入力を使用できます。型 TemplateRef の値を取得してデフォルトの削除アイコンの代わりに描画します。つまり、チップ自体ですべて処理されている際も削除ボタンを自由にカスタマイズできます。

Remove icons

チップ削除の処理と削除アイコンのカスタマイズ例:

<igx-chips-area #chipsArea>
    <igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" [removeIcon]="myRemoveIcon" (onRemove)="chipRemoved($event)">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        <span>{{chip.text}}</span>
    </igx-chip>
</igx-chips-area>
<ng-template #myRemoveIcon>
    <igx-icon fontSet="fa-solid" name="fa-trash-alt"></igx-icon>
</ng-template>
public chipRemoved(event) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

移動/ドラッグ

Dragging

チップの位置を変更するためにユーザーによってドラッグできます。移動/ドラグ機能はデフォルトで無効ですが、draggable オプションを使用して有効にできます。データソースでチップの移動を手動的に処理する必要があります。

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

Chip テンプレート

IgxChipComponent の主要な構造は、select icon, prefixchip contentsuffixremove button で構成されています。すべての要素のテンプレート化できます。

チップのコンテンツは、チップの prefix および suffix を定義する要素以外のテンプレートに定義されるコンテンツです。コンテンツ タイプを定義できます。

prefixsuffix は、テンプレート化可能な実際のチップ領域内の要素です。IgxPrefixIxgSuffix それぞれのディレクティブを使用して指定できます。

Prefix and Suffix

prefixsuffix 両方のアイコンを使用した例と content のテキスト:

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

以下はチップを更にカスタマイズした例です。

Advanced customizing

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

チップをフォーカスするには Tab キーを押すか、それをクリックします。チップを順序変更するにはキーボード ナビゲーションを使用します。

  • チップがフォーカスされた場合のキーボード コントロール:

    • LEFT - チップのフォーカスを左へ移動します。

      Left

    • RIGHT - チップのフォーカスを右へ移動します。

      Right

    • SPACE - チップが選択可能な場合、選択を切り替えます。

      Space

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

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

API

参照

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