组件 纸片

纸片

纸片是一种小块的用来呈现复杂实体的块,比如联系人。

纸片可以包含一张照片、文本、一个图标、或者一个联系人。

联系人纸片可以以一种紧凑的方式展现联系人信息。

行为
  • 选择一个纸片,以打开一个完整的详细信息视图。
  • 如果纸片包含了删除图标,则可以被删除。
规格
  • 高度: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.

可以使用联系人纸片来以一种紧凑的方式展现用户的联系人信息。当用户在输入框(通常是 “To” 字段)中输入一个联系人的名字时,联系人纸片会被触发,并显示联系人的地址以供用户进行选择。联系人纸片可以直接被添加到文本框中。

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

Material Design 中的联系人纸片的确认姓名

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

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