數(shù)據(jù)表

數(shù)據(jù)表被用來展示原始數(shù)據(jù)集，并且通常出現(xiàn)于桌面企業(yè)產(chǎn)品中。

數(shù)據(jù)集可能包含：

• 三個(gè)或者更多列的數(shù)據(jù)
• 一個(gè)相關(guān)的可視化
• 用戶可以批量查詢、操作數(shù)據(jù)

結(jié)構(gòu)
交互
選擇行
規(guī)格

結(jié)構(gòu)

在最簡(jiǎn)單的形式中，一個(gè)數(shù)據(jù)表包含列名稱的頂層行，以及許多數(shù)據(jù)行。如果用戶需要選擇或者操作數(shù)據(jù)，每一行應(yīng)該有一個(gè)復(fù)選框。

http://wiki.jikexueyuan.com/project/material-design/images/7_1.png" alt="" />

基本數(shù)據(jù)表

列頭部

• 12 sp Roboto Medium
• 54% 黑色

表內(nèi)容

• 13sp Roboto Regular
• 87%黑色

文本對(duì)齊

• 右對(duì)齊數(shù)據(jù)列
• 左對(duì)齊文本列

交互

懸停行（桌面）

當(dāng)用戶懸停到一行任意位置時(shí)，顯示一個(gè)背景。如果個(gè)別的單元格有特別的懸停狀態(tài)，同時(shí)顯示單元格和行的狀態(tài)。

懸停背景

• 灰色 200 (#EEEEEE)

http://wiki.jikexueyuan.com/project/material-design/images/7_2.png" alt="" />

懸停于一行

選擇行

當(dāng)一行被選中，在當(dāng)前行使用背景。

選中行背景

• 灰色100 (#F5F5F5)

復(fù)選框

• 使用第二個(gè)應(yīng)用顏色

http://wiki.jikexueyuan.com/project/material-design/images/7_3.png" alt="" />

一個(gè)選中的表格行

排序列

如果列排序被使能，默認(rèn)排列最重要的數(shù)據(jù)，并且在列頭部顯示已排序的狀態(tài)。如果用戶點(diǎn)擊一個(gè)已排序的列，反轉(zhuǎn)排序順序并且旋轉(zhuǎn)排序圖標(biāo)。

排序的列名稱

• 12sp Roboto Medium
• 87% 黑色

排序圖標(biāo)

• 16dp container
• 87% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_4.png" alt="" />

帶有正向排序列的表

懸停列名稱（桌面）

如果需要提供列名稱的定義，懸停時(shí)顯示一個(gè)提示文本。如果可以排序，懸停時(shí)顯示一個(gè)明亮的排序按鈕，指明這個(gè)列是可以排序的。

提示文本

• 遵守提示文本指南

排序按鈕

• 16dp container
• 26% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_5.png" alt="" />

懸停于一個(gè)列名稱

長(zhǎng)頭部標(biāo)題

有時(shí)，列之間采用推薦的 56 dp 內(nèi)邊距時(shí)，列名稱在容器中并不合適。有兩個(gè)選項(xiàng)來處理這種情況：

• 1.完整顯示列名稱，在表格容器中使能垂直滾動(dòng)條。
• 2.縮減列名稱，懸停時(shí)顯示全部。

http://wiki.jikexueyuan.com/project/material-design/images/7_6.png" alt="" />

通過一個(gè)橢圓階段長(zhǎng)的列名稱

http://wiki.jikexueyuan.com/project/material-design/images/7_7.png" alt="" />

懸停于一個(gè)截?cái)嗟牧忻Q

內(nèi)聯(lián)文本編輯

表格可能需要基本的文本編輯（例如，編輯現(xiàn)有的文本內(nèi)容，或者添加評(píng)論）。在表中包含可編輯字段，通過使用 placeholder 文本來提示。你可以使用一個(gè)簡(jiǎn)單的編輯對(duì)話框，只放一個(gè)文本框，當(dāng)然也可以顯示一個(gè)完整的對(duì)話組件。

Placeholder 文本

• 13sp Roboto Regular
• 26% 黑色
• 文本框中沒有分割線

http://wiki.jikexueyuan.com/project/material-design/images/7_8.png" alt="" />

小的編輯對(duì)話框

• 將對(duì)話框的邊緣與最近的分割線對(duì)齊，或者表格邊緣
• 24 dp 的左邊距和右邊距
• 包含單個(gè)的文本框，應(yīng)用 app 主題
• 用戶通過按動(dòng)回車鍵確認(rèn)

http://wiki.jikexueyuan.com/project/material-design/images/7_9.png" alt="" />

一個(gè)簡(jiǎn)單、單字段的編輯對(duì)話框

大的編輯對(duì)話框

• 將對(duì)話框的邊緣與最近的分隔線或者表格邊緣對(duì)齊
• 遵從對(duì)話框指南，應(yīng)用 app 主題
• 用戶通過點(diǎn)擊保存按鈕確認(rèn)文本

http://wiki.jikexueyuan.com/project/material-design/images/7_10.png" alt="" />

一個(gè)復(fù)雜靈活的編輯對(duì)話框

內(nèi)聯(lián)編輯按鈕

• 18 dp 容器
• 54% 黑色

http://wiki.jikexueyuan.com/project/material-design/images/7_11.png" alt="" />

（可選）基于圖標(biāo)的編輯提示。在內(nèi)容的另一邊的單元格邊緣包含圖標(biāo)。

內(nèi)聯(lián)菜單 除了編輯文本框，用戶可能需要從一個(gè)預(yù)定義的選項(xiàng)列表中選擇。在這種場(chǎng)景中，直接在表格中嵌入一個(gè)菜單組件。

內(nèi)聯(lián)菜單

• 13sp Roboto Regular
• 87% 黑色
• 遵循菜單的空間和尺寸指南

http://wiki.jikexueyuan.com/project/material-design/images/7_12.png" alt="" />

帶有內(nèi)聯(lián)菜單的表格

http://wiki.jikexueyuan.com/project/material-design/images/7_13.png" alt="" />

一個(gè)擴(kuò)展的內(nèi)聯(lián)菜單

卡片中的數(shù)據(jù)表

數(shù)據(jù)表可以被嵌入到卡片中，在頂部和底部放置導(dǎo)航和數(shù)據(jù)操作工具。

http://wiki.jikexueyuan.com/project/material-design/images/7_14.png" alt="" />

具有頭部和腳部的表格卡片

卡片標(biāo)題

• 20sp Roboto Regular
• 87% 黑色

卡片操作圖標(biāo)（頭部和腳部）

• 24dp container
• 54% 黑色

腳部分頁(yè)標(biāo)簽

• 12sp Roboto Regular
• 54% 黑色

可選頭部

有些表格卡片可能需要帶有操作而不是標(biāo)題的頭部。這種情況，兩個(gè)可能的方法：顯示持續(xù)的操作菜單，或者當(dāng)條目選中時(shí)激活一個(gè)內(nèi)容頭部。

http://wiki.jikexueyuan.com/project/material-design/images/7_15.png" alt="" />

一個(gè)表格卡片的可選頭部

操作按鈕

• 使用無邊框按鈕
• 使能條目選擇

著色的頭部

• 為背景使用 50 -值的第二應(yīng)用顏色
• 顯示選中條目的數(shù)量
• 在條目選擇上顯示可用的內(nèi)容圖標(biāo)

規(guī)格

垂直間距

http://wiki.jikexueyuan.com/project/material-design/images/7_16.png" alt="" />

一個(gè)數(shù)據(jù)表的垂直間距以及它的最后行

• 1.64 dp 的卡片頭部高度
• 2.56 dp 的最后行高度
• 3.48 dp 的數(shù)據(jù)行高度

頭部以及腳部?jī)?nèi)邊距

http://wiki.jikexueyuan.com/project/material-design/images/7_17.png" alt="" />

數(shù)據(jù)表卡片中的元素之間的水平內(nèi)間距。

• 數(shù)據(jù)表卡片的一周有 24 dp 的內(nèi)邊距
• 腳部控制菜單中，32 dp 的內(nèi)邊距
• 腳部行數(shù)量和標(biāo)簽之間是 40 dp 的內(nèi)邊距

列內(nèi)邊距

http://wiki.jikexueyuan.com/project/material-design/images/7_18.png" alt="" />

列之間的內(nèi)邊距

• 1.列之間的最小內(nèi)邊距為 56 dp。列中最寬的條目（包含數(shù)據(jù)和列名稱）劃定列的邊框。
• 2.在 24 dp 的圖標(biāo)容器中，復(fù)選框圖標(biāo)擁有 18 dp 的寬度和高度。