条状标签

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)
    )
)
头像条状标签

使用头像条状标签执行与所选头像相关的操作。头像卡片还可以包含一些图标,例如联系人身份照片,以便用户更轻松地辨识头像。头像图标的大小为 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)
        )
    }
)
紧凑条状标签

相关组件 CompactChip 是条状标签组件的变体,它的显示效果更小,适用于空间较小的用例。紧凑条状标签包含一个图标槽位和一个单行文本标签槽位。紧凑条状标签有一个高度为 48dp 的可点按区域。

层次结构

使用不同的填充颜色来表示条状标签层次结构。请将每个界面设计为包含主要操作的单个醒目条状标签。

高强调度
请针对页面的主要操作使用高强调度条状标签。高强调度条状标签使用主要颜色填充。

中强调度
如果是对主要操作不太重要的操作,请使用中强调度条状标签。中强调度条状标签使用次要颜色填充。

或者,也可使用自定义 OutlinedChip 组件。框状条状标签具有透明背景、不透明度为 60% 的主要变体彩色描边,以及主要彩色内容。

低强调度
低强调度条状标签采用透明填充,只有文本标签。如要表示与主要条状标签或次要条状标签之间的子项关系,请使用低强调度条状标签。

尺寸

默认条状标签

图标:24dp
高度:52dp

紧凑条状标签

图标:20dp
高度:32dp
可点按区域:48dp

用法

查看条状标签的应用示例,例如 Settings 中的标准条状标签,以及健身应用中的图片条状标签。