芯片
使用收藏夹整理内容 根据您的偏好保存和分类内容。
Chip 组件是一个交互式元素,代表输入、属性或操作。
行建议
最小值
主要文本 > 1 行
辅助标签 > 1 行
最大值
主要文本 > 2 行
辅助标签 > 3 行
结构
芯片最多可以包含两个文本标签和一个可选图标。必须提供至少一个文本标签或一个图标。如果文本标签过长,芯片可能会截断文本。如果存在辅助标签,则主要标签为一行文本。如果不存在辅助标签,则主要标签可以包含两行文本。
如果只有一个标签,则应将其居中。如果存在辅助标签或图标,则标签应左对齐。
A. 主要标签
B. 辅助标签(可选)
C. 图标(可选)
D. 容器
芯片渐变
标准芯片
顶部/左侧 = 50% 主要颜色
底部/右侧 = 0% 表面颜色
(渐变覆盖在表面颜色的背景上)
图像芯片
顶部/左侧 = 30% 主要颜色
0, 0, 45°(底部/右侧下方)= 20% 表面变体颜色
其他芯片类型
带有背景图像的芯片
图像芯片包含与所选图像相关的操作。图像芯片非常适合传达更具体的视觉效果和风格。
建议这些芯片的高度固定为 52 dp。
头像芯片
将头像芯片用于与所选头像相关的操作。头像芯片还可以使用图标使头像更容易识别,例如联系人 ID 照片。头像图标为 32x32 dp。
紧凑型芯片
相关组件 CompactChip 是 Chip 组件的一个变体,它看起来更小,专为空间较小的用例而设计。
紧凑型芯片有一个用于图标的插槽和一个用于单行文本标签的插槽。紧凑型芯片的可点击区域高度为 48 dp。
层次结构
使用不同的填充颜色来表示芯片层次结构。设计每个屏幕包含一个用于主要操作的突出芯片。
高强调
将高强调芯片用于对页面起主要作用的操作。使用主要颜色作为高强调芯片的填充颜色。
中等强调
将中等强调芯片用于重要性低于主要操作的操作。使用次要颜色作为中等强调芯片的填充颜色。
或者,使用自定义的 OutlinedChip 组件。带边框的芯片具有透明背景、60% 不透明度的主要变体颜色描边以及主要颜色内容。
低强调
低强调芯片具有透明填充,仅包含文本标签。使用低强调芯片表示与主要或次要芯片的从属关系。
尺寸
紧凑型芯片
图标:20 dp
高度:32 dp
可点击区域:48 dp
用法
查看芯片用法的示例,例如设置中的标准芯片和运动应用中的图像芯片。
自适应布局
响应式行为
芯片会拉伸以填充较大显示器上的可用宽度。
图标(24 x 24 dp)
容器(52 x XX dp)
此页面上的内容和代码示例受内容许可证中描述的许可证约束。Java 和 OpenJDK 是 Oracle 和/或其关联公司的商标或注册商标。
上次更新时间:2024-07-12 UTC。
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"缺少我需要的信息" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"过于复杂/步骤过多" },{ "type": "thumb-down", "id": "outOfDate", "label":"已过时" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"示例/代码问题" },{ "type": "thumb-down", "id": "otherDown", "label":"其他" }]
[{ "type": "thumb-up", "id": "easyToUnderstand", "label":"易于理解" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"解决了我的问题" },{ "type": "thumb-up", "id": "otherUp", "label":"其他" }]
{ "lastModified": "上次更新时间:2024-07-12 UTC。", "confidential": False }