ColorPickerPanel
Full-featured color picker panel. Built on colord, featuring an HSV color area, hue/alpha sliders, hex input, and predefined color swatches. Always visible — ideal for embedding in forms or using as a standalone panel.
Basic Usage
vue
<TColorPickerPanel v-model="color" />Output Format
vue
<TColorPickerPanel v-model="color" color-format="rgb" />Alpha Support
vue
<TColorPickerPanel v-model="color" show-alpha />Predefined Colors
vue
<TColorPickerPanel
v-model="color"
:predefine="['#f00', '#ff0', '#0f0']"
/>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
v-model | string | '#066fd1' | Color value |
color-format | 'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl' | '#hex' | Output format |
show-alpha | boolean | false | Show alpha slider |
predefine | string[] | — | Predefined color swatches |
disabled | boolean | false | Disabled state |
Emits
| Event | Description | Callback |
|---|---|---|
update:modelValue | v-model update | (value: string) |
change | Color changed | (value: string) |