このページは Cloud Translation API によって翻訳されました。

チップ

Chip コンポーネントは、入力、属性、またはアクションを表すインタラクティブな要素です。

行に関する推奨事項

最小

メインテキスト > 1 行
セカンダリラベル > 1 行

最大

メインテキスト > 2 行
セカンダリラベル > 3 行

構造

チップには最大 2 つのテキストラベル、任意のアイコンを配置できます。少なくとも 1 つのテキストラベルまたはアイコンを指定する必要があります。テキストラベルが長すぎると、チップによってテキストが切り捨てられることがあります。セカンダリラベルが存在する場合は、プライマリラベルは 1 行のテキストです。セカンダリラベルが存在しない場合は、プライマリラベルに 2 行のテキストを含めることができます。

ラベルが 1 つしかない場合は中央に配置する必要があります。セカンダリラベルやアイコンがある場合は、ラベルを左揃えにします。

A. プライマリラベル
B.セカンダリラベル（省略可）
C. アイコン（省略可）
D. コンテナ

チップのグラデーション

標準チップ

上/左 = 50% プライマリ
下/右 = 0% サーフェス
（サーフェスの色の背景にグラデーションオーバーレイが表示されます）

画像チップ

上/左 = プライマリの 30%
0、0、45°（下/右の下）= サーフェスバリアント上で 20%

代替チップタイプ

背景画像付きのチップ

画像チップには、選択した画像に関連するアクションが含まれています。画像チップは、より具体的なデザインを伝えるのに効果的です。

これらのチップの高さを 52 dp に固定することをおすすめします。

アバターチップ

選択したアバターに関連するアクションには、アバターチップを使用します。アバターチップには、アバターを識別しやすくするためのアイコン（連絡先 ID の写真など）を含めることもできます。アバターアイコンのサイズは 32x32 dp です。

コンパクトチップ

関連するコンポーネントである CompactChip は、チップコンポーネントの一種で、見た目が小さく、スペースの少ないユースケース向けに設計されています。

コンパクトチップには、アイコン用のスロットと 1 行のテキストラベル用のスロットがあります。コンパクトチップのタップ可能な領域は高さ 48 dp です。

階層

さまざまな色の塗りつぶしを使ってチップの階層を表します。各画面に、メインの操作に対して目立つチップが 1 つ含まれるように設計します。

高強調

ページの主要な操作には高強調チップを使用します。高強調チップの塗りつぶしとしてプライマリカラーを使用します。

中強調

メイン操作よりも重要でないアクションには、中強調チップを使用します。中強調チップの塗りつぶしにはセカンダリカラーを使用します。

または、カスタムの OutlinedChip コンポーネントを使用します。枠線付きチップは、透明な背景、プライマリバリエーションの色のストローク（不透明度 60%）、プライマリカラーのコンテンツです。

低強調

低強調チップは透明の塗りつぶしとテキストラベルのみで表示されます。低強調チップを使用して、プライマリチップまたはセカンダリチップへの子関係を示します。