浮片

浮片组件是表示输入、属性或操作的交互式元素。

行数建议

最小

主文本 > 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% 不透明度的主要变体颜色描边，以及主要颜色内容。

低强调

低强调浮片具有透明填充和仅文本标签。使用低强调浮片表示与主要或次要浮片的子关系。