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 Émis quand le remplissage change.	fill: Fill	Émis quand le remplissage change.

Slots

Slot	Props	Description
trigger Déclencheur personnalisé avec le style de fond de l'échantillon.	style de l'échantillon	Déclencheur personnalisé avec le style de fond de l'échantillon.
default Contenu principal de l'éditeur de remplissage.	é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