方塊
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
方塊元件是代表輸入、屬性或動作的互動式元素。
路線建議
下限
主要文字 > 1 行
次要標籤 > 1 行
上限
主要文字 > 2 行
次要標籤 > 3 行
圖解
方塊最多可包含兩個文字標籤和一個選用的圖示。必須提供至少一個文字標籤或圖示。如果文字標籤過長，方塊可能會截斷文字。如果次要標籤存在，主要標籤會是一行文字。在沒有次要標籤的情況下，主要標籤可包含兩行文字。
如果只有一個標籤，則應將標籤置中。如有次要標籤或圖示，標籤應靠左對齊。
A. 主要標籤
B.次要標籤 (選填)
C. 圖示 (選用)
D. 容器
方塊漸層
標準方塊
上/左 = 50% 主要
底部/右側 = 0% 表面
(表面顏色背景上的漸層疊加層)
圖片方塊
上/左 = 30% 主要
0、0、45° (位於下/右下方) = 20% 在表面上變化版本
替代方塊類型
含有背景圖片的方塊
圖片方塊包含與所選圖片相關的動作。圖片方塊非常適合用來傳達更具體的外觀和風格。
建議這些方塊的高度固定為 52 dp。
顯示圖片方塊
使用與已選擇圖片方塊相關的動作的圖片顯示方塊。顯示圖片方塊也能加入圖示，讓顯示圖片更容易辨識，例如聯絡人 ID 相片。顯示圖片的圖示大小為 32x32 dp。
密集方塊
相關元件是 CompactChip 是方塊元件的變化版本，其外觀較小，且專為空間較少的用途設計。
精簡方塊會為圖示提供版位，以及用於單行文字標籤的版位。密集方塊的高度為 48 dp，為可輕觸區域。
階層
使用不同的填滿色彩表示方塊階層。請將各個畫面設計成包含主要動作的單一醒目方塊。
高強調
請針對頁面主要動作使用高強調方塊。您可以使用 Primary 顏色做為高強調方塊的填滿色彩。
中強調
如果是比主要動作更不重要的動作，請使用中強調方塊。您可以使用 Secondary 顏色做為中強調方塊的填滿色彩。
或者，您也可以使用自訂 OutlinedChip 元件。這個標有外框的方塊含有透明背景、不透明度 60% 的 Primary Variant 色彩筆劃，以及 Primary 顏色的內容。
低強調
低強調方塊採用透明的填滿色彩，且只有文字標籤。如要表示與主要或次要方塊之間的子項關係，請使用低強調方塊。
大小
密集方塊
圖示：20 dp
高度：32 dp
可翻譯區域：48 dp
用法
查看晶片使用範例，例如「設定」中的標準方塊，以及運動應用程式中的圖片方塊。
自動調整版面配置
回應式行為
方塊會延伸，在較大的螢幕上填滿可用寬度。
圖示 (24 x 24 dp)
容器 (52 x XX dp)
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
