FillPickerRoot

FillPickerRoot è una primitiva popover headless per riempimenti solidi, a gradiente e immagine.

Props

Prop	Default	Type
fill* Valore riempimento corrente.	—	Fill
contentClass Classe opzionale per il contenuto del popover.	—	string | undefined
swatchClass Classe opzionale per il pulsante trigger predefinito.	—	string | undefined

Eventi

Event	Payload	Description
update	fill: Fill	Emesso quando il riempimento cambia.

Slot

Slot	Props	Description
trigger	stile campione	Trigger personalizzato con stile di sfondo campione.
default	stato riempimento + helper di conversione	Contenuto principale dell'editor del riempimento.

Slot prop del trigger

{
  style: Record<string, string>
}

Slot prop predefiniti

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

Esempio

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

API correlate

• GradientEditorRoot