FillPickerRoot

FillPickerRoot est une primitive headless de sélecteur de remplissage basé sur un popover pour les remplissages solides, dégradés et images.

Props

Prop	Default	Type
fill* Valeur de remplissage courante.	—	Fill
contentClass Classe optionnelle pour le contenu du popover.	—	string | undefined
swatchClass Classe optionnelle pour le bouton déclencheur par défaut.	—	string | undefined

Événements

Event	Payload	Description
update	fill: Fill	Émis quand le remplissage change.

Slots

Slot	Props	Description
trigger	style de l'échantillon	Déclencheur personnalisé avec le style de fond de l'échantillon.
default	état du remplissage + helpers de conversion	Contenu principal de l'éditeur de remplissage.

Props du slot déclencheur

{
  style: Record<string, string>
}

Props du slot par défaut

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

Exemple

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

API associées

• GradientEditorRoot