Chip (チップ)

Chip コンポーネントは、タグや連絡先 (メール受信者など) を楕円にコンパクト表示します。チップは、Ignite UI for Angular Chip コンポーネントと視覚的には同じです。

Chip のデモ

Chip サイズ

Chip は 3 つのサイズバリアントがサポートされます。

Large - インタラクティブシナリオに適しています。e.g. アクショントリガー
Medium - 電子メール作成ツールの受信者フィールドなど短い領域に適しています。
Small - グリッドセルの値などデータが密集したシナリオに最適です。

Chip タイプ

チップには 2 つのタイプのバリエーションがあります: Default と Primary です。

操作状態

Chip は、Enabled (有効) または Disabled (無効) の状態で挿入できます。Figma では、プロパティパネルから Disabled ブール演算を使用して状態を変更できます。

状態

ユーザーが Chip を操作すると、デフォルトの Idle (アイドル) 状態から Hover (ホバー)、Focused (フォーカス済み)、または Selected (選択済み) に変化します。これには、Hi-Fi プロトタイプへシームレスにフローする動的なインタラクションデザインの作成が可能です。Figma では、これらはプロパティパネルの State プロパティから選択できます。

Chip の削除

Chip を削除することが可能であると、これを示す特別なキャンセルアイコンが右端に表示されます。Figma では、Remove Icon ブール値プロパティを使用して、削除アイコンを表示/非表示にできます。

Chip コンテンツ

Chip は、prefix および suffix コンテナーを介したコンテンツテンプレートをサポートしており、Chip のメインラベルの前後にアイコンとテキストを挿入できます。

Figma では、プロパティパネルの「Prefix Icon」および「Suffix Icon」プロパティを使用して、プレフィックスアイコンとサフィックスアイコンを表示または非表示にすることができ、それに応じてレイアウトが自動的に調整されます。

`Text`

`Prefix`

`Prefix+Suffix`

`Suffix`

Chip のスタイル設定

Chip は、境界線と背景色のさまざまなオプション、およびテキストと Prefix、Suffix、選択、および適用可能な場合はアイコンの色の削除を通じて柔軟にスタイル設定できます。

Chips Area (チップ領域)

Chips Area コンポーネントを使用して Chips のコレクションを体系化します。Chips Area は Ignite UI for Angular で使用される Chip Area と同一でヘルプの Ignite UI for Angular Chip コンポーネントトピックで説明します。

Chips Area は Chips の継承スタイルがサポートされます。

使用方法

Chip を使用する場合、楕円はコンテンツに合わせて自動的にサイズを変更するため、それに応じてインスタンスのサイズを調整するだけで済みます。Chip を関連コンテンツのアクショントリガーとして使用する場合、アクションが 1 つのみまたは設定で選択オプションが 1 つのみの場合は使用しないでください。

良い例	悪い例