Chip
コンポーネントは、入力、属性、またはアクションを表すインタラクティブなコンパクト要素です。
解剖学
チップには最大 2 つのテキストラベル、任意のアイコンを配置できます。少なくとも 1 つのテキストラベルまたはアイコンを指定する必要があります。テキストラベルが長すぎると、チップでテキストが切り捨てられる場合があります。セカンダリ ラベルが存在する場合、プライマリ ラベルは 1 行のテキストであり、セカンダリ ラベルが存在しない場合は最大 2 行のテキストです。
A. プライマリ ラベル
B. セカンダリ ラベル(省略可)
C. アイコン(省略可)
D. コンテナ
設計に関する推奨事項
画像チップ画像チップには、選択した画像に関連するアクションが含まれています。画像チップを使用すると、より具体的なデザインを伝えることができます。
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
アバターチップ選択したアバターに関連するアクションには、アバターチップを使用します。アバターチップには、連絡先 ID の写真など、アバターの認識を容易にするためのアイコンを追加することもできます。アバター アイコンのサイズは 32x32 dp です。
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
コンパクト チップ
関連コンポーネントである CompactChip は、チップ コンポーネントのバリエーションであり、より小さく見え、スペースが少ないユースケース用に設計されています。コンパクト チップには、アイコン用のスロットと 1 行のテキストラベル用のスロットが用意されています。また、高さ 48 dp のタップ可能な領域も備えています。
階層
さまざまな色の塗りつぶしを使ってチップの階層を表します。
プライマリ アクションに対する 1 つの視認性の高いチップを含むよう各画面を設計します。
高強調
ページの主要なアクションに高強調チップを使用します。高強調チップの塗りつぶしにはプライマリの色を使用します。
中強調
プライマリ アクションよりも重要度が低いアクションに中強調チップを使用します。中強調チップの塗りつぶしにはセカンダリの色を使用します。
または、カスタムの OutlinedChip コンポーネントを使用します。枠線付きのチップの場合、背景は透明、ストロークは透明度 60% のプライマリ バリエーションの色、コンテンツはプライマリの色になります。
低強調
低強調チップは、透明な塗りつぶしで、テキストラベルのみを含みます。低強調チップを使用して、プライマリ チップまたはセカンダリ チップに対する子関係を示します。
サイズ
デフォルト チップ
アイコン: 24 dp
高さ: 52 dp
コンパクト チップ
アイコン: 20 dp
高さ: 32 dp
タップ可能な領域: 48 dp
使用方法
チップの使用例(設定の標準チップ、エクササイズ アプリの画像チップなど)をご覧ください。