方塊

Chip 元件是代表輸入、屬性或動作的互動式密集元素。

圖解

方塊最多可包含兩個文字標籤和一個選用的圖示。必須提供至少一個文字標籤或圖示。如果文字標籤過長，方塊可能會截斷文字。如果次要標籤存在，主要標籤會是一行文字；如果次要標籤不存在，則為最多兩行文字。

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 相片。顯示圖片的圖示尺寸為 32x32dp。

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

相關元件

密集方塊

相關元件 ComactChip 是方塊元件的變化版本，其外觀較小，且專為空間較少的用途設計。密集方塊有提供給圖示的版位，以及提供給單行文字標籤的版位。密集方塊的高度為 48dp 的可輕觸區域。

階層

使用不同的填滿色彩表示方塊階層。請將各個畫面設計成包含主要動作的單一醒目方塊。

高強調
請針對頁面主要動作使用高強調方塊。您可以使用 Primary 顏色做為高強調方塊的填滿色彩。

中強調
如果是比主要動作更不重要的動作，請使用中強調方塊。您可以使用 Secondary 顏色做為中強調方塊的填滿色彩。

或者，您也可以使用自訂 OutlinedChip 元件。這個標有外框的方塊含有透明背景、不透明度 60% 的 Primary Variant 色彩筆劃，以及 Primary 顏色的內容。

低強調
低強調方塊採用透明的填滿色彩，且只有文字標籤。如要表示與主要或次要方塊之間的子項關係，請使用低強調方塊。

大小

預設方塊

圖示：24dp
高度：52dp

密集方塊

圖示：20dp
高度：32dp
可輕觸區域：48dp

使用方式

查看方塊使用範例，例如「設定」中的標準晶片，以及運動應用程式中的圖片方塊。