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

チップ

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

階層

さまざまな色の塗りつぶしを使ってチップの階層を表します。プライマリアクションに対する 1 つの視認性の高いチップを含むよう各画面を設計します。

高強調
ページの主要なアクションに高強調チップを使用します。高強調チップの塗りつぶしにはプライマリの色を使用します。

中強調
プライマリアクションよりも重要度が低いアクションに中強調チップを使用します。中強調チップの塗りつぶしにはセカンダリの色を使用します。

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

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

サイズ

デフォルトチップ

アイコン: 24 dp
高さ: 52 dp

コンパクトチップ

アイコン: 20 dp
高さ: 32 dp
タップ可能な領域: 48 dp

使用方法

チップの使用例（設定の標準チップ、エクササイズアプリの画像チップなど）をご覧ください。

チップ

解剖学

設計に関する推奨事項

関連コンポーネント

階層

サイズ

使用方法