Khối
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Thành phần Khối là một phần tử tương tác đại diện cho một dữ liệu đầu vào, thuộc tính hoặc hành động.
Đề xuất đường kẻ
Tối thiểu
Văn bản chính > 1 dòng
Nhãn phụ > 1 dòng
Tối đa
Văn bản chính > 2 dòng
Nhãn phụ > 3 dòng
Phân tích
Khối có thể chứa tối đa hai nhãn văn bản và một biểu tượng không bắt buộc. Bạn phải cung cấp ít nhất một nhãn văn bản hoặc một biểu tượng. Khối có thể cắt bớt văn bản nếu nhãn văn bản quá dài. Nhãn chính là một dòng văn bản nếu có nhãn phụ. Nhãn chính có thể chứa hai dòng văn bản nếu không có nhãn phụ.
Nếu chỉ có một nhãn, nhãn đó phải được căn giữa. Nếu có nhãn hoặc biểu tượng phụ, thì các nhãn phải được căn trái.
A. Nhãn chính
B. Nhãn phụ (không bắt buộc)
C. Biểu tượng (không bắt buộc)
D. Vùng chứa
Chuyển màu của khối
Khối tiêu chuẩn
Trên cùng/Trái = 50% chính
Dưới cùng/Phải = 0% vùng hiển thị
(Lớp phủ chuyển màu trên nền có màu của vùng hiển thị)
Khối hình ảnh
Trên cùng/Trái = 30% chính
0, 0, 45° (Dưới dưới cùng/Phải) = 20% trên biến thể vùng hiển thị
Các loại khối thay thế
Khối có hình nền
Khối hình ảnh chứa các hành động liên quan đến một hình ảnh đã chọn. Khối hình ảnh hoạt động hiệu quả để truyền tải một giao diện cụ thể hơn.
Các khối này nên có chiều cao cố định là 52 dp.
Khối đại diện
Sử dụng khối hình đại diện cho các thao tác liên quan đến một hình đại diện đã chọn. Khối hình đại diện cũng có thể có các biểu tượng dùng để làm cho hình đại diện dễ nhận ra hơn, chẳng hạn như ảnh trong giấy tờ tuỳ thân liên hệ. Biểu tượng hình đại diện có kích thước 32x32 dp.
Khối nhỏ gọn
Thành phần có liên quan, CompactChip là một biến thể của thành phần Chip xuất hiện nhỏ hơn và được thiết kế cho các trường hợp sử dụng có ít không gian hơn.
Khối nhỏ gọn có một ô cho biểu tượng và một ô cho nhãn văn bản một dòng. Khối nhỏ gọn có vùng có thể nhấn vào chiều cao là 48 dp.
Hệ phân cấp
Dùng màu tô khác nhau để biểu thị hệ phân cấp khối. Hãy thiết kế mỗi màn hình để chứa một khối nổi bật duy nhất cho thao tác chính.
Nhấn mạnh
Sử dụng khối có mức độ nhấn mạnh cao cho các thao tác chính trên trang. Hãy sử dụng màu chính làm màu nền của khối nhấn mạnh.
Nhấn trung bình
Sử dụng khối nhấn trung bình cho các thao tác ít quan trọng hơn thao tác chính. Hãy sử dụng màu phụ làm màu của khối nhấn trung bình.
Ngoài ra, hãy sử dụng thành phần OutlinedChip tuỳ chỉnh. Khối có đường viền có nền trong suốt, nét vẽ màu biến thể chính có độ mờ 60% và nội dung được tô màu chính.
Nhấn thấp
Khối nhấn thấp có màu nền trong suốt và chỉ có nhãn văn bản. Sử dụng khối nhấn thấp để biểu thị mối quan hệ con với khối chính hoặc khối phụ.
Kích thước
Khối mặc định
Biểu tượng: 24 dp
Chiều cao: 52 dp
Khối nhỏ gọn
Biểu tượng: 20 dp
Chiều cao: 32 dp
Vùng có thể nhấn: 48 dp
Tác dụng
Xem ví dụ về việc sử dụng khối (ví dụ: khối tiêu chuẩn) trong phần Cài đặt và khối hình ảnh trong ứng dụng tập thể dục.
Bố cục thích ứng (Adaptive Layouts)
Hành vi thích ứng
Các khối sẽ kéo giãn để lấp đầy chiều rộng có sẵn trên màn hình lớn hơn.
Biểu tượng (24 x 24 dp)
Vùng chứa (52 x XX dp)
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],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"]]
