组件 片段

片段

片段通过小块区域来显示复杂的实体,比如联系人。

片段可以包含的实体,例如,照片、文本、线条、图标或者联系人。

联系人片段可以简洁的展示出联系人信息。

行为

  • 选取片段将会打开详情视图。
  • 展示删除图标的片段可以被删除。

规格

  • 高度:32dp
  • 标签:13sp Roboto Regular,87% black

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

片段类型

片段可用于多种类型的实体,包括自由格式的文本、预定义文本、线条或联系人,也可以包含图标。

带文本的片段

片段标签

  • 13sp Roboto Regular
  • 87% black

带文本和图标的片段

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

打开片段

轻触片段可以打开详情视图(在卡片内或全屏展示)或者展开有相关选项的菜单。

删除片段

片段可以是可删除的或不可删除的。如果有删除图标则表示可以被删除。

用户可以点击删除图标、或者按键盘上的 Delete 键来移除片段。

联系人片段 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

联系人片段以简洁的方式来展示用户的联系人信息。当用户在输入框(通常是「收件人」字段)中输入一个联系人的名字时,联系人片段就会出现,并显示联系人的地址以供用户进行选择。联系人片段可以直接从菜单中添加到文本框。

联系人片段主要用于帮助用户准确高效地选择收件人。

用户在联系人片段上确认邮件接收者的姓名。

用户在联系人片段中选择联系人的邮件地址。

联系人片段有多种不同的状态:正常、聚焦、按下、和激活。

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

单行片段

可删除的片段

高度:32dp
标签左边距:12dp

删除图标

尺寸:24x24dp
颜色 & 不透明度:54% balck
边距:4dp

在桌面端,「删除」图标一直显示。

不可删除的片段

高度:32dp
标签的左右边距:12dp

联系人片段

高度:32dp
标签左边距:8dp
标签右边距:12dp

联系人片段

关闭的联系人片段

  • 联系人名称文本:14sp Roboto Regular
  • 聚焦后,片段的海拔上升到 2dp。按下后,它会展开以显示联系人的其他地址。

打开的联系人片段

  • 联系人名称文本:16sp Roboto Regular
  • 地址文本:14sp Roboto Regular
  • 打开片段的海拔: 8dp
  • 按下时,联系人片段会自动关闭。
  • 默认状态下,顶部的条目会处于激活并聚焦状态。

联系人片段

高度:32dp
标题上下左边距:8dp
标题右边距:12dp

聚焦和激活的联系人片段

高度:40dp
上下边距:16dp

未聚焦的联系人片段

上下边距:20dp