Chip コンポーネント

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

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

ライブ デモ

構造

Blazor 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

作業の開始

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

Ignite UI for Blazor のサービスを登録します。

// in Program.cs file

builder.Services.AddIgniteUIBlazor();

IgbChip のクライアント リソース モジュールである IgbChipModule の登録は任意です。コンポーネントは初めてレンダリングされるときにリソースを読み込みます。ただし、builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)) のように指定すると、リソースを事前に読み込んだり、クライアント側でのみ作成される要素に対応したりできます (コンポーネント モジュールを参照)。

ホスト ページにテーマ スタイルシートを追加します。

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

IgniteUI.Blazor パッケージを使用します。IgniteUI.Blazor 26.1 には、Chip の以前のバージョンが含まれています:

• IgbChip は、Outlined、Locale、ResourceStrings プロパティを公開しません。
• base パーツが選択ボタンであり、削除アイコンはその内部にレンダリングされます。Chip には action パーツも remove パーツもありません。
• フォーカス スタイルは --ig-chip-focus-outline-color と --ig-chip-focus-selected-outline-color を読み取ります。
• キーボードとスクリーン リーダーの動作は、アクセシビリティで説明されているとおり異なります。

使用方法

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

レイアウト

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

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

<IgbChip Selectable="true" Removable="true">
    <IgbIcon slot="select" IconName="check" Collection="material" />
    <IgbIcon slot="prefix" IconName="person" Collection="material" />
    Ana Zane
    <IgbIcon slot="suffix" IconName="mail" Collection="material" />
    <IgbIcon slot="remove" IconName="close" Collection="material" />
</IgbChip>

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

タイプ

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

デフォルト タイプにするには Variant を未設定のままにし、プライマリ タイプにするには StyleVariant.Primary に設定します。バリアントは、ステータス カラーとして StyleVariant.Info、StyleVariant.Success、StyleVariant.Warning、StyleVariant.Danger も受け入れます。

<IgbChip>Default</IgbChip>
<IgbChip Variant="StyleVariant.Primary">Primary</IgbChip>

サイズ

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

インタラクション状態

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

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

<IgbChip Disabled="true">Archived</IgbChip>

状態

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

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

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

<IgbChip Selectable="true" Selected="@isBold" SelectedChanged="OnSelectedChanged">Bold</IgbChip>

@code {
    private bool isBold = true;

    private void OnSelectedChanged(bool selected) => isBold = selected;
}

Chip の削除

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

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

RemoveScript を通じて JavaScript ハンドラーを割り当て、ホスト ページが読み込むスクリプト ファイルで igRegisterScript を使用して登録します。

<IgbChip Removable="true" RemoveScript="handleChipRemove">Angular</IgbChip>

function handleChipRemove(event) {
    event.target.remove();
}

igRegisterScript("handleChipRemove", handleChipRemove, false);

Chips エリア

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

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

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

推奨 / 非推奨

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

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

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

プロパティ

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

イベント

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

スタイル設定

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

IgniteUI.Blazor 26.1 の Chip にはアウトライン スタイルがないため、--ig-chip-outlined-background と --ig-chip-outlined-text-color は効果がありません。Chip は --ig-chip-focus-shadow-color の代わりに --ig-chip-focus-outline-color と --ig-chip-focus-selected-outline-color を読み取ります。

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

アクセシビリティ

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

キーボード操作

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

IgniteUI.Blazor 26.1 では、削除可能でない Chip で Space を押しても選択は切り替わらず、Enter を押すと選択が切り替わり、削除イベントも発生します。

スクリーン リーダー / ARIA

Blazor Chip は、ネイティブ セマンティクスと ARIA 属性を通じて状態を公開します。

• Chip はネイティブの button です。Selectable が設定されている場合、aria-pressed が Selected 状態を反映します。
• デフォルトの選択アイコンには、aria-label “select chip” があります。
• デフォルトの削除アイコンは、role="button"、tabindex="0"、aria-label “remove chip” を持ち、Chip のボタン内にレンダリングされるため、入れ子になったコントロールです。
• アイコンがボタン内にレンダリングされるため、Chip のアクセシブルな名前にはそれらのラベルが含まれます (例: “Chip remove chip”)。
• 無効な Chip はネイティブ ボタンを無効にするため、支援技術は Chip を利用不可として報告します。

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

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

ユーザー側の責務:

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

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

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

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

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

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

既知の例外:

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

トラブルシューティング

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

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

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

API リファレンス

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

依存関係

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

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

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

その他のリソース

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

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

関連コンポーネント

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

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

FAQ