ColorPickerRoot

ColorPickerRoot es un primitivo headless de selector de color basado en popover.

Proporciona:

• un slot de trigger con estilos de fondo de muestra
• un trigger por defecto como fallback
• un slot de contenido con color y update()

Props

Prop	Default	Type
color* Valor de color actual.	—	Color
contentClass Clase opcional para el contenido del popover.	—	string | undefined
swatchClass Clase opcional para el botón trigger por defecto.	—	string | undefined

Eventos

Event	Payload	Description
update	color: Color	Emitido cuando el color cambia.

Slots

Slot	Props	Description
trigger	{ style: Record<string, string> }	Trigger personalizado con estilo de fondo de muestra.
default	{ color: Color, update: (color: Color) => void }	Contenido principal del editor de color.

Ejemplo

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

APIs relacionadas

• ColorInputRoot