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 Emesso quando il riempimento cambia.	fill: Fill	Emesso quando il riempimento cambia.

Slot

Slot	Props	Description
trigger Trigger personalizzato con stile di sfondo campione.	stile campione	Trigger personalizzato con stile di sfondo campione.
default Contenuto principale dell'editor del riempimento.	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