Tab 頁籤

2022-05-10, Helen

# 標題 內容
1 Status 數據展示
2 Zeplin https://zpl.io/2vj5QoP
3 Ant Design https://ant.design/components/tabs-cn/
4 Web #
5 App #

定義

透過切換頁籤來達到切換不同狀態、分類的效果。

何時使用

提供同層級的區塊將內容進行分類，以保持介面整潔。

位置

卡片、卡片標題、或表格內。

規則

  1. Tab 中有標徽（Badge）樣式的數字，僅有「全部」不必有數字。
  2. 標徽內數字如實呈現，無最高上限。
  3. Tab 列中需有「全部」 Tab，並放至最後。

類型

1. 大 Tab
  • 置於 Header 底下，用於該頁大分類。
  • 匯入頁面需有兩個 Tab，分別為「匯入檔案」與「匯入紀錄」。
  • 範例：https://zpl.io/bAKlNnx


2. 小 Tab