Dropdown 下拉選單

把次要操作收進一個展開選單,節省畫面空間。使用 Element Plus 的 el-dropdown。

設計準則

• 收納次要 / 低頻操作:主操作用按鈕直接露出,其餘塞進「更多操作」下拉;不要把所有操作都藏進去
• 危險操作(刪除等)用 divided 分隔,並套 danger 文字色,避免誤點
• split-button 用在「有一個明確主操作 + 幾個變體」:例如「立即發送 ▾(排程 / 測試 / 草稿)」
• 觸發方式:選單類用 hover,操作類建議 click(更明確,行動裝置也適用);全產品盡量統一
• 圖示用 Font Awesome,與文字間距 mr-2;尺寸跟隨情境用 size
• 選項數量多時分組並用 divided;超過約 8 項考慮改用其他形式(例如彈窗列表)

基本用法

滑過展開,含停用項目與分隔的危險操作。

loading

主操作按鈕(split-button)

loading

觸發方式

loading

尺寸

loading

Do / Don't

✅ Do	❌ Don't
主操作露出、次要收進下拉	把主操作也藏進下拉
刪除用 divided + danger 色	刪除跟編輯擠在一起沒分隔
操作類統一用 click 觸發	這顆 hover 那顆 click
選項 ≤ 8 項	下拉一長串還要捲動

給工程師

• 每個 el-dropdown-item 設 command,在 el-dropdown 的 @command 事件統一處理
• el-dropdown-item 支援 disabled、divided、icon;el-dropdown 支援 trigger(hover / click / contextmenu)、split-button、size、placement、hide-on-click
• split-button 時左半按鈕點擊觸發 @click,右半箭頭展開選單
• 完整 API 見 Element Plus Dropdown 文件。本站規範優先於 EP 文件中的視覺建議。