Segmented 分段控制器

一組互斥選項的滑塊式切換。使用 Element Plus 的 el-segmented。

設計準則

• 和 Radio 按鈕樣式的分工:表單裡的值(會被送出儲存)用 el-radio-button;純檢視切換(切視圖、切圖表範圍、切列表/卡片)用 Segmented——切換立即生效、不屬於表單資料
• 選項 2–5 個、文字簡短;更多選項改用 [Tabs 或 Select]
• 尺寸跟著工具列其他元件走,表格上方工具列用 small
• block 用於窄容器(側欄、彈窗)撐滿等分

基本用法

loading

尺寸

loading

撐滿容器(block)

loading

自訂內容(圖標)與禁用選項

loading

配置方向

direction="vertical" 用於側欄這類直向空間充裕的位置;一般工具列維持水平:

loading

禁用狀態

整組禁用要附原因說明;個別選項禁用在選項文字裡帶出原因:

loading

Do / Don't

✅ Do	❌ Don't
檢視切換用 Segmented	表單值也用(用 radio-button)
2–5 個簡短選項	八個長選項擠一排
尺寸跟工具列一致	同一列大小不一

給工程師

完整 API 見 Element Plus Segmented 文件。 本站規範優先於 EP 文件中的視覺建議。