定義
展示列表內容。表格內可放入文字、標籤、Icon、段落、數字、圖片⋯⋯等等。
何時使用
有大量結構化的數據需要呈現時,或當有需要對數據進行排序、搜索、分頁、自定義操作等複雜行為時,可使用表格元件。
位置
位於卡片內。
規則
1. 基本上以以下長度規範為標準,若遇長度不足頁面時,則調整資料量最不固定者(例:名稱、email、地址)的長度,以補足長度。
2. 以使用者可以第一屏看見所有資料、不需左右拉動拉 bar 為目標,可斟酌調整表格長度。
3. 可用升降冪的欄位類型:日期、時間、狀態;金額、數量、數字;編號、號碼、類別。
| 標題列名稱 | 對齊方式 | 長度(px) | 是否可排序 |
|---|---|---|---|
| 編號 | 置中 | 160 | 可 |
| 序號 | 置中 | 100 | 可 |
| 金額 | 置右 | 110 | 可 |
| 百分比 | 置右 | 100 | 可 |
| 數量 | 置右 | 80 | 可 |
| 電話 | 置左 | 100 | 可 |
| 手機 | 置左 | 100 | 可 |
| 傳真 | 置左 | 90 | 可 |
| 置左 | 100 | 可 | |
| 名稱 | 置左 | 150 | 可 |
| 人名 | 置左 | 80 | 可 |
| 地址 | 置左 | 180 | 否 |
| 類別、分類、類型 | 置左 | 90 | 可 |
| 文字、備註、註記 | 置左 | 150 | 否 |
| 規格、規格類型 | 置左 | 90 | 否 |
| 規格項目 | 置左 | 150 | 否 |
| 狀態 | 置中 | 100 | 可 |
| 動作 | 置中 | 動作按鈕用原本計算的widthSize | 否 |
| 日期 | 置中 | 120 | 可 |
| 時間 | 置中 | 100 | 可 |
| 日期+時間 | 置中 | 130 | 可 |
| 日期+時間(range) | 置中 | 180 | 可 |
| 圖片 | 置中 | 60 | 否 |
| 勾選框 | 置中 | 60 | 否 |
| 啟用/停用開關(Switch) | 置中 | 100 | 否 |