ColorPickerPanel 取色器面板

取色器的「攤開版」:面板直接嵌在頁面或彈窗裡,不需點擊展開。使用 Element Plus 的 el-color-picker-panel。

設計準則

• 用於取色是主要任務的介面(主題設定頁、標籤管理彈窗);順帶挑個色的場景用收合的 ColorPicker
• predefine 準則與 ColorPicker 相同:用擴充色盤十色的 500 階
• 同一畫面不要同時出現多個面板
• 面板已含確認邏輯,外部不要再包一層「套用顏色」按鈕造成雙重確認
• 透明度開放使用(show-alpha):面板的使用場景(主題設定、遮罩、圖表疊色)常需要半透明;注意開啟後色值輸出為 RGBA,儲存端要能接受這個格式

基本用法

loading

透明度

開啟 show-alpha 後多一條透明度滑桿,色值以 RGBA 輸出:

loading

禁用

無編輯權限或前置條件未完成時整個面板禁用;禁用時面板要保留目前色值,讓使用者知道現在是什麼顏色:

loading

無邊框

面板預設帶邊框。當外層容器(卡片、彈窗區塊)已經有框線或明確分隔時,用 :border="false" 拿掉,避免雙重框線:

loading

Do / Don't

✅ Do	❌ Don't
取色為主要任務時使用	表單裡順帶挑色也攤開(用 ColorPicker)
predefine 給擴充色盤 500 階	不給預設色盤
一個畫面一個面板	多個面板並排

給工程師

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