ColorPickerPanel ^(beta)
ColorPickerPanel is the core component of ColorPicker.
Basic usage
ColorPickerPanel requires a string typed variable to be bound to v-model.
export function ColorPickerPanelBasic() { const [color, setColor] = useState<string | null>("#409EFF"); return <ElColorPickerPanel value={color} onChange={setColor} />;}
Alpha
ColorPickerPanel supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.
export function ColorPickerPanelAlpha() { const [color, setColor] = useState<string | null>("rgba(19, 206, 102, 0.8)"); return <ElColorPickerPanel value={color} showAlpha onChange={setColor} />;}
Predefined colors
ColorPickerPanel supports predefined color options
export function ColorPickerPanelPredefinedColor() { const [color, setColor] = useState<string | null>("rgba(255, 69, 0, 0.68)"); return ( <ElColorPickerPanel value={color} showAlpha predefine={PREDEFINE_COLORS} onChange={setColor} /> );}
Border
By default the color-picker-panel is bordered but in some case you don't want it.
export function ColorPickerPanelBorder() { const [color, setColor] = useState<string | null>("#ff6900"); const [isNarrow, setIsNarrow] = useState(true); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(([entry]) => { setIsNarrow(entry.contentRect.width < 815); }); observer.observe(container); return () => observer.disconnect(); }, []); return ( <div ref={containerRef}> <div style={{ textAlign: "center" }}>No border:</div> <ElDivider /> <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "16px", }} > <div style={{ padding: "20px" }}> <ElColorPickerPanel value={color} border={false} onChange={setColor} /> </div> <ElDivider style={{ height: "auto" }} direction={isNarrow ? "horizontal" : "vertical"} /> <ElCard> <ElColorPickerPanel value={color} border={false} onChange={setColor} /> </ElCard> </div> </div> );}
Disabled
The disabled attribute determines if the color picker is fully disabled.
export function ColorPickerPanelDisabled() { const [color, setColor] = useState<string | null>("#ff6900"); return ( <ElColorPickerPanel value={color} disabled showAlpha predefine={PREDEFINE_COLORS.slice(0, 7)} onChange={setColor} /> );}
API
Attributes
| Name | Description | Type | Default |
|---|
| model-value / v-model | binding value | string | — |
| border | whether the color picker panel is bordered | boolean | true |
| disabled | whether to disable the color picker | boolean | false |
| show-alpha | whether to display the alpha slider | boolean | false |
| color-format | color format of v-model | enum | enum |
| predefine | predefined color options | array | — |
| validate-event 2.11.7 | whether to trigger form validation | boolean | true |
| hue-slider-class 2.13.6 | class names will be passed to hue-slider | object | — |
| hue-slider-style 2.13.6 | styles will be passed to hue-slider | string / object | — |
Slots
| Name | Description |
|---|
| footer | content to append after the Input |
Exposes
| Name | Description | Type |
|---|
| color | current color object | object |
| inputRef | custom input ref | object |
| update 2.11.4 | update sub components | Function |
