定義
展示列表內容。表格內可放入文字、標籤、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 | 否 |