Skip to content

ColorPickerRoot

ColorPickerRoot — headless-примитив пикера цвета на основе поповера.

Предоставляет:

  • слот триггера со стилизацией фона свотча
  • дефолтный фоллбэк триггера
  • слот содержимого с color и update()

Props

PropDefaultType
color*
Текущее значение цвета.
Color
contentClass
Опциональный класс для содержимого поповера.
string | undefined
swatchClass
Опциональный класс для кнопки триггера по умолчанию.
string | undefined

Events

EventPayloadDescription
updatecolor: ColorГенерируется при изменении цвета.

Slots

SlotPropsDescription
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>

Связанные API

Released under the MIT License.