#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习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~
如有不当，还请多多指教~
网友评论