FillPickerRoot

FillPickerRoot ist ein headless popover-basiertes Füllungsauswahl-Primitiv für einfarbige, Verlaufs- und Bildfüllungen.

Props

Prop	Default	Type
fill* Aktueller Füllungswert.	—	Fill
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	fill: Fill	Ausgelöst, wenn sich die Füllung ändert.

Slots

Slot	Props	Description
trigger	Farbmuster-Stil	Benutzerdefinierter Trigger mit Farbmuster-Hintergrundstil.
default	Füllungszustand + Konvertierungs-Hilfsmittel	Haupt-Füllungs-Editor-Inhalt.

Trigger-Slot-Props

{
  style: Record<string, string>
}

Standard-Slot-Props

{
  fill: Fill
  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
  toSolid: () => void
  toGradient: () => void
  toImage: () => void
  update: (fill: Fill) => void
}

Beispiel

<FillPickerRoot :fill="fill" @update="fill = $event">
  <template #default="{ fill, category, toSolid, toGradient, update }">
    <div>{{ category }}</div>
    <button @click="toSolid">Einfarbig</button>
    <button @click="toGradient">Verlauf</button>
    <MyFillEditor :fill="fill" @change="update" />
  </template>
</FillPickerRoot>

Verwandte APIs

• GradientEditorRoot