Chip コンポーネント

Ignite UI for Angular Chip は、タグ、フィルター、人物を表すコンパクトな要素で、ユーザーが選択または削除できます。

Chip は、選択可能、削除可能、またはその両方にすることができ、ラベルの前後にアイコンやその他のコンテンツを表示できます。

ライブ デモ

構造

Angular Chip は、ラベルとオプションのアイコンを 1 行に収めるコンテナーです。

igx-chip[role="option"]               // host; aria-selected reflects `selected`
└─ div.igx-chip__item                 // chip wrapper; drag and drop target
   ├─ div.igx-chip__start
   │  ├─ div.igx-chip__select         // select icon, shown while selected
   │  └─ [igxPrefix]                  // content before the label
   ├─ div.igx-chip__content           // label (projected content)
   └─ div.igx-chip__end
      ├─ [igxSuffix]                  // content after the label
      └─ div.igx-chip__remove         // remove control, rendered when removable

作業の開始

Angular Chip をアプリケーションに追加する前に、作業の開始トピックの説明に従って、Ignite UI for Angular をインストールし、テーマを構成します。

IGX_CHIPS_DIRECTIVES をコンポーネントにインポートします。これには、Chip、Chips エリア、igxPrefix ディレクティブ、igxSuffix ディレクティブが含まれます。

import { Component } from '@angular/core';
import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular/chips';

@Component({
  selector: 'app-chip-sample',
  imports: [IGX_CHIPS_DIRECTIVES],
  template: `<igx-chip>Design</igx-chip>`,
})
export class ChipSampleComponent {}

前提条件とバージョンの互換性

Angular Chip の一部の機能は、アプリケーションが使用するパッケージのバージョンに依存します。

igniteui-angular パッケージを使用します。outlined 入力は 22.2.0 以降で使用できます。

使用方法

Angular Chip にラベルを追加し、レイアウトに応じてアイコン、タイプ、サイズ、選択または削除を追加します。

レイアウト

Angular Chip は、ラベルの周囲のコンテンツのテンプレート化をサポートします。コンテンツに igxPrefix ディレクティブと igxSuffix ディレクティブを指定することで、テキストや アイコンなどをラベルの前後に表示できます。Chip 内のアイコンは Chip のサイズに従うため、大、中、小の 3 つのサイズがあります。

ラベルを Chip 内に配置します。selectIcon 入力と removeIcon 入力にテンプレートを設定して、デフォルトの選択アイコンと削除アイコンを置き換えます。

<igx-chip selectable removable [selectIcon]="selectIcon" [removeIcon]="removeIcon">
  <igx-icon igxPrefix>person</igx-icon>
  Ana Zane
  <igx-icon igxSuffix>mail</igx-icon>
</igx-chip>

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

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

カスタムの selectIcon テンプレートと removeIcon テンプレートは、アクセシブルなラベルを含め、デフォルトのアイコンを置き換えるため、アイコンにアクセシブルなラベルを付けてください。

タイプ

Angular Chip には、デフォルトとプライマリの 2 つのタイプがあります。

デフォルト タイプにするには variant を未設定のままにし、プライマリ タイプにするには primary に設定します。バリアントは、ステータス カラーとして info、success、warning、danger も受け入れます。

<igx-chip>Default</igx-chip>
<igx-chip variant="primary">Primary</igx-chip>

アウトライン

outlined を設定すると、Chip がボーダーとアウトライン背景でレンダリングされます。任意のバリアントと組み合わせることができます。

<igx-chip outlined variant="info">Draft</igx-chip>

サイズ

Angular Chip には 3 つのサイズがあります:

• 大: アクション トリガーなどのインタラクティブなシナリオに適しています。
• 中: メール作成の受信者フィールドなど、短い領域に適しています。
• 小: グリッド セルの値など、データ密度の高いシナリオに適しています。

--ig-size を var(--ig-size-small)、var(--ig-size-medium)、または var(--ig-size-large) に設定して、Chip のサイズを変更します。Chip に設定するか、コンテナーに設定して内部のすべての Chip のサイズを変更します。

.filter-chips {
  --ig-size: var(--ig-size-small);
}

インタラクション状態

Angular Chip は、有効または無効にできます。

disabled を設定すると、操作できなくなります。無効な Chip はフォーカスを受け取ることも選択することもできず、removable が設定されていても削除アイコンはレンダリングされません。

<igx-chip disabled>Archived</igx-chip>

状態

ユーザーが Angular Chip を操作すると、デフォルトのアイドル状態から、ホバー、フォーカス、選択済みの状態に変化します。

選択済み状態にするには、選択を有効にする必要があります。selectable を設定すると、ユーザーは Chip をクリックするか Space を押して選択を切り替えることができます。切り替えるたびに selected が更新され、新しい状態とともに選択イベントが発生します。初期状態を定義するには selected を設定します。

キャンセル可能な selectedChanging イベントは selected に新しい状態を報告し、状態の変更後に selectedChanged が続きます。[(selected)] をバインドして、コンポーネント内で状態を保持します。選択アイコンは、selected が true の場合は常に表示されます。

<igx-chip selectable [(selected)]="isBold" (selectedChanging)="onSelectedChanging($event)">Bold</igx-chip>

import { IChipSelectEventArgs } from 'igniteui-angular/chips';

public isBold = true;

public onSelectedChanging(event: IChipSelectEventArgs) {
  console.log(event.selected); // the new selected state
}

Chip の削除

削除可能な Angular Chip は、末尾に削除アイコンを表示し、ユーザーはこれを操作して Chip の削除を要求します。

removable を設定すると、アイコンが表示されます。アイコンを操作すると削除イベントが発生しますが、Chip はページ上に残ります。イベント ハンドラーで Chip、またはそれが表す項目を削除してください。

@for (chip of chips; track chip.id) {
  <igx-chip [id]="chip.id" removable (remove)="onRemove($event)">{{ chip.text }}</igx-chip>
}

import { IBaseChipEventArgs } from 'igniteui-angular/chips';

public chips = [
  { id: 'angular', text: 'Angular' },
  { id: 'react', text: 'React' },
  { id: 'blazor', text: 'Blazor' },
];

public onRemove(event: IBaseChipEventArgs) {
  this.chips = this.chips.filter((chip) => chip.id !== event.owner.id);
}

Chips エリア

ChipsArea コンポーネントを使用して、Chip のコレクションを整理します。

Chips エリア内では、矢印キーで Chip 間のフォーカスを移動します。ユーザーが draggable な Chip を別の Chip の上にドラッグするか、Shift と矢印キーを押すと、Chips エリアは新しい順序とともに reorder を発生させます。また、選択された Chip とともに selectionChange も発生させます。Chips エリア自体は Chip を並べ替えないため、reorder ハンドラーで新しい順序をデータに適用してください。

<igx-chips-area (reorder)="onReorder($event)">
  @for (chip of chips; track chip.id) {
    <igx-chip [id]="chip.id" [draggable]="true">{{ chip.text }}</igx-chip>
  }
</igx-chips-area>

import { IChipsAreaReorderEventArgs } from 'igniteui-angular/chips';

public onReorder(event: IChipsAreaReorderEventArgs) {
  this.chips = event.chipsArray.map((chip) => this.chips.find((item) => item.id === chip.id)!);
}

ローカライズ

Chip は、グローバル ローカライズ API で設定された言語に従います。詳細はローカライズを参照してください。単一の Chip でデフォルトの選択アイコンと削除アイコンのアクセシブルなラベルを上書きするには、resourceStrings を設定します。

<igx-chip removable [resourceStrings]="{ igx_chip_remove: 'Remove tag' }">Design</igx-chip>

推奨 / 非推奨

Chip を使用すると、長円形がコンテンツに合わせて自動的にサイズ調整されるため、インスタンスのサイズを適宜調整するだけで済みます。Chip を関連コンテンツのアクション トリガーとして使用する場合は、使用可能なアクションが 1 つしかないシナリオや、選択可能なオプションが 1 つしかない構成での使用は避けてください。

推奨グループ化されたアクションや、関連する少数のオプションに Chip を使用します。

非推奨単一のアクションや単一の選択肢に Chip を使用することは避けてください。

プロパティ

Angular Chip は、選択、削除、状態、外観に関するプロパティを公開します。

ChipsArea は、サイズに関するプロパティを公開します。

イベント

Angular Chip は、ユーザーが選択または削除するとイベントを発生させます。

ChipsArea は、内部の Chip に対するイベントを発生させます。

スタイル設定

トークン レベルの変更には Angular Chip の CSS 変数を使用し、特定の要素を対象にする場合は CSS クラスを使用してスタイルを設定します。

Sass テーマ

アプリケーションが Sass を通じて Ignite UI テーマをカスタマイズする場合は、chip-theme 関数を使用します。$background (アウトライン Chip の場合は $outlined-background) を設定すると、テーマはそこからテキスト、ホバー、フォーカス、選択状態の色を導出します。特定の値が必要な場合は、他のパラメーターを上書きします。

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

$custom-chip-theme: chip-theme(
  $background: #011627,
  $remove-icon-color: #fecc47
);

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

CSS 変数

Sass ビルド手順なしでローカルにスタイルを設定する必要がある場合は、Chip の CSS 変数を直接設定します。Chip に設定するか、コンテナーに設定して内部のすべての Chip にスタイルを設定します。

.filter-chips {
  --ig-chip-background: var(--ig-primary-500);
  --ig-chip-text-color: var(--ig-primary-500-contrast);
  --ig-chip-remove-icon-color: var(--ig-primary-500-contrast);
}

Chip の単一の要素にスタイルを設定するには、その CSS クラスを対象にします。

igx-chip .igx-chip__end {
  color: var(--ig-gray-400);
}

Tailwind によるスタイル設定

Tailwind ユーティリティ クラスを使用して Angular Chip のスタイルを設定でき、[--ig-chip-background:var(--ig-primary-600)] のような任意のプロパティを通じて CSS 変数を設定できます。まず、Tailwind クラスの説明に従って Tailwind をセットアップしてください。

アクセシビリティ

Angular Chip は、キーボード操作をサポートし、その状態を支援技術に公開します。

キーボード操作

キーボード ユーザーは Tab で各 Chip に移動し、Chip が削除可能な場合は続けてその削除コントロールに移動します。無効な Chip はスキップされます。

スクリーン リーダー / ARIA

Angular Chip は、ネイティブ セマンティクスと ARIA 属性を通じて状態を公開します。また、アクセシブルな名前はそのコンテンツから取得されます。

• Chip ホストには role="option" があり、aria-selected が selected 状態を反映します。
• igx-chips-area 要素には role="listbox" と aria-label “chip area” があります。
• デフォルトの選択アイコンと削除アイコンには、アクセシブルなラベルがあります。
• 無効な Chip はタブ順序から除外されますが、無効状態を公開する ARIA 属性はありません。

デフォルト アイコンのラベルは、ローカライズで示すように変更できます。

アクセシビリティ コンプライアンス

インフラジスティックスは、Section 508 と WCAG 2.1 のガイドライン領域に対する Ignite UI for Angular のアクセシビリティ サポートを、アクセシビリティ コンプライアンストピックで文書化しています。

ユーザー側の責務:

• すべての Chip に、それが表す項目を識別するテキスト ラベルを付けてください。

• 削除イベント ハンドラーで Chip を削除した後は、次の Chip など、論理的な場所にフォーカスを移動してください。

• テーマの色を上書きする場合は、Chip の背景とそのテキストおよびアイコンとの間に十分なコントラストを保ってください。

• Chip のスタイルを変更する場合は、表示されるフォーカス インジケーターを維持してください。

• 小サイズやカスタムの --ig-chip-size を使用する場合は、Chip とその削除コントロールをタップできる十分な大きさに保ってください。

• ユーザーが選択する Chip は、option ロールに listbox の親が存在するように、igx-chips-area 内に配置してください。

• カスタムの選択アイコンと削除アイコンのテンプレートには、レイアウトで説明されているとおりラベルを付けてください。

既知の例外:

• 削除コントロールはフォーカス可能でラベル付きのアイコンを含みますが、button ロールを公開しません。
• 無効状態は ARIA で公開されないため、スクリーン リーダーは無効な Chip を無効として読み上げません。ユーザーがその状態を知る必要がある場合は、近くのテキストで説明してください。

トラブルシューティング

変更やアップグレードの後に Chip が期待どおりに動作しない、または表示されない場合は、このセクションを参照してください。

削除アイコンをクリックしても Chip がページに残るのはなぜですか?

削除イベントはアプリケーションに通知するだけです。Chip の削除に示すように、イベント ハンドラーで Chip を削除してください。

フォーカス アウトライン変数が適用されなくなったのはなぜですか?

igniteui-angular 22.2.0 では、chip-theme の $focus-outline-color パラメーターと $focus-selected-outline-color パラメーターが $focus-shadow-color と $focus-selected-shadow-color に置き換えられました。スタイル内のパラメーター、および対応する --ig-chip-* 変数の名前を変更してください。

API リファレンス

Chip の API 全体については、次の API リファレンスを参照してください。

依存関係

Angular Chip は、Chip に含まれる Icon コンポーネントを使用して、デフォルトの選択アイコンと削除アイコンをレンダリングします。

<igx-icon>person</igx-icon> のように Material Icons の名前を使用するアイコンには、Material Icons フォントが必要です。index.html に <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> を追加してください。Sass によるスタイル設定ワークフローでは、chip-theme 関数と icon-theme 関数を使用します。

その他のリソース

サポートと関連する Ignite UI for Angular ドキュメントについては、次のリソースを参照してください。

• アイコン
• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)

関連コンポーネント

Chip がインタラクションに最適でない場合は、次の関連コンポーネントを使用してください。

• Button - フォームの送信やダイアログを開くなど、コマンドを実行するコントロール。
• Checkbox - オン/オフの選択、または独立した選択肢のセットのためのフォーム コントロール。
• Badge - ステータス、カウント、通知を示す、小さな非インタラクティブなインジケーター。

FAQ