组件 标签

标签

标签用于以小块形式呈现复杂实体,例如联系人。

标签可以包含照片、文本、规则、图标或联系人等内容。

联系人标签可以紧凑地呈现联系人信息。

行为
  • 选择标签会打开完整的详情视图。
  • 如果标签显示了删除图标,则该标签可以删除。
规格
  • 高度:32dp
  • 文字:13sp Roboto Regular, 87% black
Material Design 标签用于以小块形式呈现复杂实体

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

标签可以包含照片、短标题和简短信息。

标签类型

标签可用于多种实体,包括自由格式文本、预定义文本、规则或联系人,也可以包含图标。

Material Design 中的文本标签

文本标签

标签文字

  • 13sp Roboto Regular
  • 87% black
Material Design 中含文本和图标的标签

含文本和图标的标签

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

打开标签

点击标签,可打开该标签对应的完整详情视图(以卡片或全屏形式),或打开相关的选项菜单。

删除标签

标签可以是可删除或不可删除的。如果标签可删除,则显示删除图标。

用户可以点击删除图标,或使用键盘上的“Delete”键删除标签。

联系人标签 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

可以使用联系人标签以紧凑方式呈现用户的联系人信息。当用户在文本字段(通常是“收件人”字段)中输入联系人姓名,看到联系人的地址并选择正确的一个时,会触发并插入联系人标签。联系人标签也可以直接从联系人菜单添加到文本字段。

联系人标签可帮助用户高效确认消息将发送给正确的人。

用户在联系人标签上确认收件人姓名

用户在联系人标签上确认收件人姓名。

用户在 Material Design 联系人标签上确认邮件地址

用户在联系人标签上确认要选择的邮件地址。

Material Design 联系人标签状态:正常、聚焦、按下

联系人标签有多种状态:正常、聚焦、按下和激活。

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

单行标签

Material Design 单行标签规格

可删除标签

高度:32dp
文字左侧内边距:12dp

删除图标

尺寸:24dp x 24dp
颜色和不透明度:54% black
外边距:4dp

在桌面端,“删除”图标会持续显示。

Material Design 单行标签规格

不可删除标签

高度:32dp
文字左右内边距:12dp

联系人标签

高度:32dp
文字左侧内边距:8dp
文字右侧内边距:12dp

联系人标签

关闭状态的联系人标签

  • 联系人名称文本为 Roboto Regular 14sp
  • 聚焦后,标签的海拔高度会上升到 2dp。按下时,它会展开以显示该联系人的其他地址。

打开状态的联系人标签

  • 联系人名称文本:Roboto Regular 16sp
  • 地址文本:Roboto Regular 14sp
  • 打开状态的联系人标签的海拔高度为 8dp
  • 按下时,联系人标签会自动关闭
  • 默认状态下,顶部字段处于激活并聚焦状态
Material Design 联系人标签元素

联系人标签

高度:32dp
标题顶部、底部、左侧内边距:8dp
标题右侧内边距:12dp

Material Design 中聚焦的联系人标签

聚焦和激活状态的联系人标签

高度:40dp
顶部和底部内边距:16dp

未聚焦状态的联系人标签

顶部和底部内边距:20dp