标题条状标签

标题小卡片提供一小段信息。

设计元素应锚定到帧的底部。

原则

情境化:标题小卡片的主要目的是为其关联的内容提供清晰且 即时的情境。

简洁:标题小卡片旨在提供简短信息,通常是简短的 标题、名称或状态。

视觉上与众不同:虽然标题小卡片与 Jetpack Compose Glimmer 具有相同的美感,但其 外观应足够独特,以便用户将其识别为标签,而不是 互动按钮。

用法和放置位置

默认情况下,标题小卡片是只读组件。

将标题小卡片用于静态或装饰性元素,以告知用户并添加标签。
请勿将标题小卡片用作可点按的操作提示,因为它们没有焦点状态,请改用按钮。

设计元素应锚定到帧的底部 标题小卡片可以与静态移动应用栏进行比较。

A 标题小卡片

B 移动应用中的应用栏

在布局内

默认情况下,标题小卡片是只读组件。

小卡片会随布局滚动。
或者,小卡片可以固定在布局内。

解剖结构

设计元素应锚定到帧的底部

显示了默认标题小卡片和粘性标题小卡片。粘性标题小卡片会显示轮廓。

1. 标题小卡片标签

2. 可选的前置图标或实体

自定义

标题小卡片可以显示图标,也可以不显示图标,还可以显示其他样式属性。

属性 自定义 默认值
形状 大、圆形
内边距 16 dp、8 dp
镶边 2 dp、#606460
文本 正文小号
前置图标 40 dp
深度 0
最大宽度 352 dp
最小高度 56 dp