标题胶囊

标题胶囊用于呈现一小段简明信息。

Glimmer 标题胶囊

设计原则

交代上下文:标题胶囊的主要作用,是为关联内容即时提供清晰的上下文信息。

内容简短:适合放置短标题、名称或状态等简要信息。

视觉角色清楚:在保持 Jetpack Compose Glimmer 风格的同时,应让用户看出它是标签,而不是可交互的按钮。

使用与布局

标题胶囊默认是只读组件。

将标题胶囊用作静态信息或装饰性标签,为用户提供说明。
建议:将标题胶囊用作静态信息或装饰性标签,为用户提供说明。
用标题胶囊提示可轻点执行的操作;它没有焦点状态,操作入口应使用按钮。
避免:用标题胶囊提示可轻点执行的操作;它没有焦点状态,操作入口应使用按钮。
标题胶囊与手机应用栏的对比

标题胶囊可以理解为手机应用中静态应用栏的对应形式。
A. 标题胶囊。
B. 手机应用栏。

在布局中的表现

标题胶囊默认只读。

标题胶囊可以随布局一起滚动。
也可以让标题胶囊固定在布局中。

组件构成

默认标题胶囊与固定式标题胶囊的构成

图中展示了默认标题胶囊与固定式标题胶囊。固定式标题胶囊带有描边。

1. 标题胶囊的文字标签。
2. 可选的前置图标或实体元素。

自定义

标题胶囊可以选择是否显示图标,也支持调整其他样式属性。

属性可自定义默认值
形状是Large、Circle
内边距是16 dp、8 dp
边框是2 dp、#606460
文字是Body Small
前置图标是40 dp
深度是0
最大宽度否352 dp
最小高度是56 dp