Tabs 標籤頁

在同一個畫面內切換多組平行內容。使用 Element Plus 的 el-tabs。

設計準則

• 用於「同一層級的內容切換」,不是頁面主導覽——主導覽是 Menu 的事
• 分頁數量建議 ≤ 7 個;過多改用側欄選單或下拉篩選
• 樣式選一種為主:一般內容用預設(底線式);獨立卡片區塊用 type="card";需要外框把整塊內容框起來時用 type="border-card"。同一頁不要混用多種
• 分頁位置預設在上方(tab-position="top");空間狹長時才用左右側
• editable / closable 只給使用者可自訂的分頁(例如自訂報表視圖);系統固定的分頁不可關閉
• 分頁標題用短名詞,必要時用 #label 插槽加圖示或徽章數字

基本用法

loading

卡片式

適合設定精靈、獨立區塊的切換。

loading

帶外框卡片式

loading

分頁位置

loading

自訂標題(圖示 / 徽章)

用 #label 插槽自訂分頁標題。

loading

可新增 / 可移除

editable 同時開啟新增與移除,適合使用者自訂的分頁。

loading

自訂新增按鈕圖示

用 #add-icon 插槽換掉預設的「+」圖示。

loading

自訂新增觸發器

不想用內建的新增鈕時,tabs 只開 closable(負責移除),新增改由外部按鈕觸發——新增鈕的樣式與位置就能自由設計。

loading

Do / Don't

✅ Do	❌ Don't
分頁內容互為平行	拿 tabs 當多步驟流程(那是 Steps)
一頁只用一種樣式	預設、card、border-card 混用
分頁數 ≤ 7	塞十幾個分頁還橫向捲動
可關閉只給自訂分頁	系統固定分頁也能被關掉

給工程師

• v-model 綁 el-tab-pane 的 name;type 可為 card / border-card;tab-position 可為 top / right / bottom / left
• editable(可增可刪)也可拆成單獨的 addable / closable;事件:tab-add、tab-remove、tab-click
• lazy 可延遲渲染分頁內容,分頁多且內容重時能省效能
• 完整 API 見 Element Plus Tabs 文件。本站規範優先於 EP 文件中的視覺建議。