组件 数据表格

数据表格

数据表格显示原始的数据集。它们通常出现在桌面端的企业产品中。

数据表格可以嵌入到其他元素中,例如卡片。它们可以包含:

  • 一组相关的可视化数据
  • 查询和操作数据的功能

卡片中的数据表格,可以在顶部和底部显示导航和数据操作工具。

支持的交互功能

鼠标悬停在行上(桌面端)
行选择
列排序
鼠标悬停在列上(桌面端)
长标题
文本编辑
菜单

相关组件

卡片

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

列标题

12sp Roboto Medium
54% black

文本对齐方式

数据列右对齐
文本列左对齐

交互 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

鼠标悬停在行上(桌面端)

当鼠标悬停在行上时,在该行上显示背景色。如果个别的单元格有特殊的悬停状态,同时显示单元格和行的状态。

悬停背景色

  • Grey 200 (#EEEEEE)
Material Design 中的数据表格鼠标悬停效果

鼠标悬停在行上

行选择

当数据行被选中时,在该行上显示一个背景色。

选中行的背景色

  • Grey 100 (#F5F5F5)

复选框

  • 使用强调色
Material Design 中的数据表格选中的行

选中的行

列排序

如果启用了列排序,默认对最重要的数据进行排序,并在列头部显示已排序的状态。如果用户点击一个已排序的列,则反转排序顺序、并旋转排序图标。

已排序的列名称

  • 12sp Roboto Medium
  • 87% black

排序图标

  • 16dp container
  • 87% black
Material Design 中的数据表格带有正排序的列

带有正排序的列

鼠标悬停状态的列名称(桌面端)

如果要对列标题提供更详细的解释,请在鼠标悬停时显示一个工具提示。如果启用了排序,在鼠标悬停时显示一个排序图标,以表明该列是可以排序的。

工具提示

排序图标

  • 16dp container
  • 38% black
Material Design 中的数据表格鼠标悬停在列名称上

鼠标悬停在列名称上

较长的表头文本

有时,列之间使用推荐的 56dp 内边距时,列名称在容器中并不合适。有两个办法来处理这种情况:

  1. 显示完整的列名称,并在表格内使用水平滚动
  2. 显示缩短的列名称,并在鼠标悬停时显示完整列名称
Material Design 中的数据表格长列名称截断省略号

对太长的列名称进行截断,并用省略号代替

Material Design 中的数据表格鼠标悬停在截断的列名称上

鼠标悬停在截断的列名称上

单元格文本编辑

表格可能需要基本的文本编辑功能(例如,编辑已有的文本内容,或添加评论)。在表格中包含可编辑字段,并通过占位符文本进行提示。可以在点击时显示一个只含文本框的小型编辑框,或者显示一个完整的对话框组件。

占位符文本

  • 13sp Roboto Regular
  • 38% black
  • 文本框中没有分隔线
Material Design 中的可编辑单元格带占位符

一个含占位符的可编辑单元格


小型编辑框

  • 将编辑框的边缘与最近的分隔线或表格边缘对齐
  • 左右均有 24dp 的内边距
  • 包含一个简单的文本框,并使用 App 的主题(如果适用的话)
  • 用户通过按回车键确认
Material Design 中的简单编辑框含文本框

一个简单的、含单个文本框的编辑框

大型编辑框

  • 将编辑框的边缘与最近的分隔线或表格边缘对齐
  • 遵循对话框的设计指南,并使用 App 的主题(如果适用的话)
  • 用户通过点击保存按钮确认
Material Design 中的灵活编辑框

一个复杂、灵活的编辑框

单元格内的编辑图标

  • 18dp container
  • 54% black
Material Design 中的编辑提示图标使用示例

(可选)使用图标进行编辑提示。在单元格的内容的反方向使用图标。

单元格内的菜单

除了编辑文本,用户可能还需要从下拉菜单中选择选项,在这种情况下,可以将菜单组件直接嵌入到表格中。

单元格内的菜单

  • 13sp Roboto Regular
  • 87% black
  • 根据菜单的设计规范进行设计
Material Design 中的含菜单表格

含菜单的表格

Material Design 中的打开菜单表格

一个打开了菜单的表格

卡片中的表格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

表格可以嵌入到表格中,并在顶部和底部显示导航和数据操作工具。

Material Design 中的有头部和底部的表格卡片

具有头部和底部的表格卡片

卡片标题

20sp Roboto Regular
87% black

卡片操作图标(头部和底部)

24dp container
54% black

底部分页标签

12sp Roboto Regular
54% black

替换头部

有些表格卡片可能需要带有操作的头部,而不需要带标题的头部。这种情况下,你可以:

  • 持续显示操作
  • 当有条目被选中显示相关的头部
Material Design 中的表格卡片替换头部

表格卡片中的替换头部

操作按钮

使用无边框的按钮
使条目能被选择

着色的头部

使用 50 的强调色作为背景色进行填充
显示选中条目的数量
在有条目被选中后,显示可用的操作图标

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

垂直间距

Material Design 的数据表格卡片垂直间距及最后一行

数据表格卡片的垂直间距以及它的最后一行

  1. 卡片头部高度:64dp
  2. 最后一行高度:56dp
  3. 数据行高度:48dp

头部和底部内边距

Material Design 中的表格卡片水平间距

表格卡片中元素之间的水平间距

  1. 表格卡片的四周有 24dp 的内边距
  2. 底部的控件之间有 32dp 的间距
  3. 底部行数和它的标签之间有 40dp 的间距

列的内边距

Material Design 中的数据表格列内边距

列之间的内边距

  1. 列之间最小间距为 56dp。列中最宽的条目(包含数据和列名称)划定列的边框。
  2. 复选框在 24dp 的图标容器中,拥有 18dp 的宽度和高度。