Open Source

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

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

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/chips';
// 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/chips';
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 コンポーネントの使用

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

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

バリアント

Angular チップは、いくつかの定義済みスタイルバリアントをサポートしています。variant 入力プロパティにサポートされている値のいずれか (primary、info、success、warning、または danger) を割り当てることで、バリアントを変更できます。

<igx-chip variant="success">Success</igx-chip>

選択

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

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

このコンポーネントはマテリアルアイコンを使用します。index.html に次のリンクを追加してください: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

削除

削除は、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>

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

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

<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/chips';
// 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 テンプレート

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

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>

デモ

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

<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/chips';
// 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 Area

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

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/chips';
// 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;
}

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

デモ

スタイル設定

Chip テーマのプロパティマップ

プライマリプロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

Primary Property	Dependent Property	Description
$background	$text-color	The chip text color.
	$border-color	The chip border color.
	$hover-background	The chip hover background color.
	$hover-border-color	The chip hover border color.
	$hover-text-color	The chip hover text color.
	$focus-background	The chip focus background color.
	$selected-background	The chip selected background color.
$focus-background	$focus-text-color	The chip text focus color.
	$focus-border-color	The chip focus border color.
	$focus-outline-color (bootstrap & indigo variants only)	The chip focus outline color.
$selected-background	$selected-text-color	The selected chip text color.
	$selected-border-color	The selected chip border color.
	$hover-selected-background	The selected chip hover background color.
$hover-selected-background	$hover-selected-text-color	The selected chip hover text color.
	$hover-selected-border-color	The selected chip hover border color.
	$focus-selected-background	The selected chip focus background color.
$focus-selected-background	$focus-selected-text-color	The selected chip text focus color.
	$focus-selected-border-color	The selected chip focus border color.
	$focus-selected-outline-color (bootstrap & indigo variants only)	The chip focus outline color in selected state.

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

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

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

最もシンプルな方法として、chip-theme を拡張して新しいテーマを作成し、チップの項目をスタイリングします。$background または $selected-background を指定することで、状態に応じた色や前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。

$custom-chip-theme: chip-theme(
    $background: #57a5cd,
    $selected-background: #ecaa53,
    $remove-icon-color: #d81414,
    $border-radius: 5px,
);

最後に、カスタムテーマをアプリケーションに含めます。

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

以下のサンプルでは、カスタマイズした CSS 変数を使用したチップコンポーネントが、Ant デザインシステムのチップに視覚的に似たデザインを実現している様子を確認できます。

Tailwind によるスタイル設定

カスタム Tailwind ユーティリティクラスを使用して chip をスタイル設定できます。まず Tailwind を設定してください。

グローバルスタイルシートに Tailwind をインポートした上で、以下のように必要なテーマユーティリティを適用します:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

ユーティリティファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

light-* クラスはライトテーマ用です。
dark-* クラスはダークテーマ用です。
プレフィックスの後にコンポーネント名を追加します (例: light-chip、dark-chip)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、chip-theme で確認できます。構文は次のとおりです:

<igx-chip
  class="!light-chip
  ![--background:#99BAA6]
  ![--remove-icon-color:#C92828]"
  ...
>
  {{chip.text}}
</igx-chip>

ユーティリティクラスが優先されるようにするには、感嘆符 (!) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。

最終的に、chip は次のようになります:

カスタムサイズ変更

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

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

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

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

.my-app {
  --ig-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);
}

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

API

テーマの依存関係

IgxIcon テーマ

参照

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