Material Design——Data tables

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Data tables

数据表显示数据集。

一、用法

以易于浏览的方式显示数据表，以便用户可以查找模式和见解，它们可以嵌入主要内容中，例如卡片。

数据表可以包括：

· 相应的可视化

· 导航

· 查询和操作数据的工具

△ 原则

· 分级  数据表内容应该是分层的，按字母顺序排列的或类似的组织

· 互动  数据表应允许用户交互，以便用户可以自定义方式对信息进行排序

· 直观  数据表应该直观，使用户专注于内容，而不是结构

二、分析

数据表可以包括三列或更多列。顶部列出列名的标题行，随后的所有行都包含数据。数据表可以包括相应的可视化，如图形。

如果用户需要与行数据进行交互，则每行都应附带复选框。

1. Container（容器）

包含所有数据表内容

2. Column header（列标题）

列标题是列内容的标题

3. Sorting tool（排序工具）

排序工具允许用户重新排序表格内容，仅在悬停时显示

4. Row checkbox（行复选框）

复选框允许用户选择一行

5. Table content（表内容）

表包含原始数据

△ 列标题

默认情况下，列之间有56 dp的填充。扩展到此填充中的列标题可以是：

· 可以水平滚动，以便用户可以滚动查看完整列名称

· 缩短列名，同时在工具提示中显示完整列（悬停时）

左：用椭圆截断长列标题；右：将鼠标悬停在截断的列标题上可使用工具提示显示全文。

△ 排序工具

如果启用排序，则在默认情况下对最左边的列进行排序，并在列标题中显示一个指示符。点击排序列的标题会反转排序顺序，也会将排序图标旋转180度。

具有排序工具的数据表。

△ 行复选框

选中行的复选框后，该行应显示背景颜色。

选中的行复选框。

三、行为

△ 行悬停（桌面）

如果用户悬停在一行上，则在该行中显示背景色。如果单个表单元具有特定的悬停状态，则同时显示该单元格的悬停状态以及行悬停状态。

悬停在一排。

△ 列悬停（桌面）

悬停时，可以显示两件事：

· 工具提示显示有关每个列标题的更多信息

· 如果启用了排序，则列标题中会出现排序图标

将鼠标悬停在列名称上时，可以显示工具提示和排序图标。

△ 内联文本编辑

表可以包括可编辑的字段，用于编辑文本或添加注释。它们由字段中的占位符文本表示。在点击时，将显示带有文本字段或完整对话框的编辑对话框。

带有占位符文本的可编辑表单元格。

· 小编辑对话框

文本可以使用一个小编辑对话框进行编辑，允许用户通过按Enter来确认文本。对话框边缘应与最近的分隔线或表格边缘对齐。

· 大编辑对话框

大型编辑对话框是一个复杂、灵活的对话框。用户通过点击保存按钮来确认文本。对话框边缘应与最近的分隔线或表格边缘对齐。

· 内联编辑图标（可选）

内联编辑图标允许字段编辑，单元格另一端的图标与内容相对应。

· 内联菜单

内联菜单允许用户从预定义的选项列表中进行选择。这些菜单可以直接嵌入到表中。

带有内联菜单的表格。

扩展的内联菜单。

 四、卡内的表

表可以嵌入到卡中。在每张卡的底部，可以显示用于表格导航和数据操作的工具。

带页眉和页脚的表卡。

△ 数据表卡头

当卡片中的表格需要可操作的标题而不是标题时，可以：

· 显示持久性操作

· 显示指示何时选择项目的上下文标题

1. Action buttons；2. Colored header

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~