ColorPickerRoot

ColorPickerRoot ist ein headless popover-basiertes Farbauswahl-Primitiv.

Es bietet:

• einen Trigger-Slot mit Farbmuster-Hintergrundstil
• einen Standard-Trigger-Fallback
• einen Inhalt-Slot mit color und update()

Props

Prop	Default	Type
color* Aktueller Farbwert.	—	Color
contentClass Optionale Klasse für den Popover-Inhalt.	—	string | undefined
swatchClass Optionale Klasse für die Standard-Trigger-Schaltfläche.	—	string | undefined

Ereignisse

Event	Payload	Description
update	color: Color	Ausgelöst, wenn sich die Farbe ändert.

Slots

Slot	Props	Description
trigger	{ style: Record<string, string> }	Benutzerdefinierter Trigger mit Farbmuster-Hintergrundstil.
default	{ color: Color, update: (color: Color) => void }	Haupt-Farb-Editor-Inhalt.

Beispiel

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

Verwandte APIs

• ColorInputRoot