ColorPickerPanel ^(beta)

ColorPickerPanel is the core component of ColorPicker.

Basic usage

:::demo ColorPickerPanel requires a string typed variable to be bound to v-model.

color-picker-panel/basic

:::

:::demo ColorPickerPanel supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.

color-picker-panel/alpha

:::

:::demo ColorPickerPanel supports predefined color options

color-picker-panel/predefined-color

:::

By default the color-picker-panel is bordered but in some case you don't want it.

:::demo

color-picker-panel/border

:::

The disabled attribute determines if the color picker is fully disabled.

:::demo

color-picker-panel/disabled

:::

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]`'rgb' \| 'prgb' \| 'hex' \| 'hex3' \| 'hex4' \| 'hex6' \| 'hex8' \| 'name' \| 'hsl' \| 'hsv'`	^[enum]`'hex' (when show-alpha is false) \| 'rgb' (when show-alpha is true)`
predefine	predefined color options	^[array]`string[]`	—
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]`string \| string[] \| Record<string, boolean>`	—
hue-slider-style ^(2.13.6)	styles will be passed to hue-slider	^[string] / ^[object]`StyleValue`	—

Name	Description
footer	content to append after the Input