GradientEditorStop

GradientEditorStop est une primitive headless pour afficher et éditer un point d'arrêt de dégradé individuel.

Props

Prop	Default	Type
stop* Valeur du point d'arrêt courant.	—	GradientStop
index* Index du point d'arrêt courant.	—	number
active* Si ce point d'arrêt est actif.	—	boolean

Événements

Event	Payload	Description
select	index: number	Émis quand le point d'arrêt est sélectionné.
updatePosition	index: number, position: number	Émis quand la position du point d'arrêt change.
updateColor	index: number, hex: string	Émis quand la couleur du point d'arrêt change.
updateOpacity	index: number, opacity: number	Émis quand l'opacité du point d'arrêt change.
remove	index: number	Émis quand le point d'arrêt est supprimé.

Slots

Slot	Props	Description
default	état du point d'arrêt + handlers de mise à jour	Contrat de rendu complet du point d'arrêt de dégradé.

Props du slot par défaut

{
  stop: GradientStop
  index: number
  active: boolean
  positionPercent: number
  opacityPercent: number
  hex: string
  css: string
  select: () => void
  updatePosition: (position: number) => void
  updateColor: (hex: string) => void
  updateOpacity: (opacity: number) => void
  remove: () => void
}

Exemple

<GradientEditorStop :stop="stop" :index="index" :active="active" v-slot="ctx">
  <MyGradientStopRow v-bind="ctx" />
</GradientEditorStop>

API associées

• GradientEditorRoot
• GradientEditorBar