ColorPickerRoot
ColorPickerRoot — headless-примитив пикера цвета на основе поповера.
Предоставляет:
- слот триггера со стилизацией фона свотча
- дефолтный фоллбэк триггера
- слот содержимого с
colorиupdate()
Props
| Prop | Default | Type |
|---|---|---|
color*Текущее значение цвета. | — | Color |
contentClassОпциональный класс для содержимого поповера. | — | string | undefined |
swatchClassОпциональный класс для кнопки триггера по умолчанию. | — | string | undefined |
Events
| Event | Payload | Description |
|---|---|---|
update | color: Color | Генерируется при изменении цвета. |
Slots
| Slot | Props | Description |
|---|---|---|
trigger | { style: Record<string, string> } | Кастомный триггер со стилем фона свотча. |
default | { color: Color, update: (color: Color) => void } | Основное содержимое редактора цвета. |
Пример
vue
<ColorPickerRoot :color="color" @update="color = $event">
<template #trigger="{ style }">
<button class="size-6 rounded border" :style="style" />
</template>
<template #default="{ color, update }">
<MyColorEditor :color="color" @change="update" />
</template>
</ColorPickerRoot>