Chip コンポーネント

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

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

ライブ デモ

構造

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

igc-chip                              // host
└─ div[part="base"]                   // chip wrapper
   ├─ button[part="action"]           // selection control; aria-pressed when selectable
   │  ├─ span[part="prefix"]          // hidden when empty and not selected
   │  │  ├─ slot[name="select"]       // default select icon, shown when selectable and selected
   │  │  ├─ slot[name="start"]        // content before the prefix content
   │  │  └─ slot[name="prefix"]       // content before the label
   │  ├─ span[part="content"]
   │  │  └─ slot                      // label (default slot)
   │  └─ span[part="suffix"]          // hidden when empty
   │     ├─ slot[name="end"]          // content before the suffix content
   │     └─ slot[name="suffix"]       // content after the label
   └─ span[part="remove"]             // rendered when removable and not disabled
      └─ slot[name="remove"]          // default remove icon button

作業の開始

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

Chip ラッパーとテーマ スタイルシートをインポートします。

import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

igniteui-react パッケージを igniteui-webcomponents のテーマ スタイルシートと併用します。React Chip は igc-chip Web コンポーネントをラップするため、使用可能なプロパティ、スロット、パーツは igniteui-react が使用する igniteui-webcomponents のバージョンに従います。

使用方法

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

レイアウト

React Chip は、ラベルの周囲のコンテンツのテンプレート化をサポートします。prefix スロットと suffix スロットにコンテンツを配置することで、テキストや アイコンなどをラベルの前後に表示できます。Chip 内のアイコンは Chip のサイズに従うため、大、中、小の 3 つのサイズがあります。

ラベルはデフォルト スロットに配置します。start スロットはプレフィックス コンテンツの前に、end スロットはサフィックス コンテンツの前にレンダリングされます。select スロットと remove スロットを使用して、デフォルトの選択アイコンと削除アイコンを置き換えます。

<IgrChip selectable removable>
  <IgrIcon slot="select" name="check" />
  <IgrIcon slot="prefix" name="person" />
  Ana Zane
  <IgrIcon slot="suffix" name="mail" />
  <IgrIcon slot="remove" name="close" />
</IgrChip>

remove スロットのカスタム コンテンツは、フォーカスとアクセシブルなラベルを含め、デフォルトの削除アイコンを置き換えます。置き換えるコンテンツはフォーカス可能にし、アクセシブルな名前を付けてください。

タイプ

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

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

<IgrChip>Default</IgrChip>
<IgrChip variant="primary">Primary</IgrChip>

アウトライン

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

<IgrChip outlined variant="info">Draft</IgrChip>

サイズ

React 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);
}

インタラクション状態

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

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

<IgrChip disabled>Archived</IgrChip>

状態

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

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

選択アイコンと押下状態は、selectable が設定されている場合にのみ表示されます。

const [bold, setBold] = useState(true);

<IgrChip selectable selected={bold} onSelect={(event) => setBold(event.detail)}>
  Bold
</IgrChip>

Chip の削除

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

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

const [tags, setTags] = useState(['Angular', 'React', 'Blazor']);

{tags.map((tag) => (
  <IgrChip key={tag} removable onRemove={() => setTags((current) => current.filter((item) => item !== tag))}>
    {tag}
  </IgrChip>
))}

Chips エリア

Chip のコレクションを整理するには、折り返し可能な flex コンテナーなど、間隔を空けて配置するコンテナーに Chip を配置します。

React Chip には個別の Chips エリア コンポーネントがないため、コンテナーの CSS がレイアウトを決定します。

.chips-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ローカライズ

locale を設定すると、登録済みの言語で組み込み文字列を表示できます。または resourceStrings を設定して、独自の文字列を指定します。Chip は、これらの文字列をデフォルトの削除アイコンのアクセシブルなラベルに使用します。言語の登録については、ローカライズを参照してください。

<IgrChip removable resourceStrings={{ chip_remove: 'Remove tag' }}>Design</IgrChip>

推奨 / 非推奨

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

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

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

プロパティ

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

イベント

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

スタイル設定

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

Sass テーマ

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

@use "igniteui-theming/sass/themes" 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 パーツを対象にします。

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

Tailwind によるスタイル設定

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

アクセシビリティ

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

キーボード操作

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

スクリーン リーダー / ARIA

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

• 選択コントロールはネイティブの button です。selectable が設定されている場合、aria-pressed が selected 状態を反映します。
• デフォルトの選択アイコンは、aria-pressed が選択状態を既に伝えているため、支援技術からは非表示になります。
• デフォルトの削除アイコンは、role="button"、tabindex="0"、およびデフォルトが “remove chip” の aria-label を持つ個別のコントロールです。
• 無効な Chip はネイティブ ボタンを無効にするため、支援技術は Chip を利用不可として報告します。

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

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

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

ユーザー側の責務:

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

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

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

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

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

• カスタムの remove スロット コンテンツは、レイアウトで説明されているとおり、フォーカス可能でラベル付けされた状態に保ってください。

既知の例外:

• igniteui-webcomponents 7.4.1 以前に基づくリリースでは、Chip 要素に設定した aria-label が選択ボタンに反映されないため、Chip のアクセシブルな名前は変更されません。代わりに、コンテンツを通じて Chip に名前を付けてください。

トラブルシューティング

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

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

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

アップグレード後に ::part(base) のスタイルが変わったのはなぜですか?

igniteui-webcomponents 7.3.1 以降、base パーツは Chip のラッパー、選択ボタンは action パーツ、削除コントロールは remove パーツになりました。ボタンを対象にしていたスタイルは、::part(action) に移動してください。

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

--ig-chip-focus-outline-color 変数と --ig-chip-focus-selected-outline-color 変数は、igniteui-webcomponents 7.3.0 で --ig-chip-focus-shadow-color と --ig-chip-focus-selected-shadow-color に置き換えられました。スタイル内の変数名を変更してください。

API リファレンス

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

依存関係

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

Chip のスロットに配置するカスタム アイコンは登録してください。

Chip は、デフォルトの外観に共有テーマ スタイルシートも使用します。

その他のリソース

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

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

関連コンポーネント

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

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

FAQ