GradientEditorStop

GradientEditorStop è una primitiva headless per il rendering e la modifica di un singolo stop del gradiente.

Props

Prop	Default	Type
stop* Valore stop corrente.	—	GradientStop
index* Indice stop corrente.	—	number
active* Se questo stop è attivo.	—	boolean

Eventi

Event	Payload	Description
select Emesso quando lo stop viene selezionato.	index: number	Emesso quando lo stop viene selezionato.
updatePosition Emesso quando la posizione dello stop cambia.	index: number, position: number	Emesso quando la posizione dello stop cambia.
updateColor Emesso quando il colore dello stop cambia.	index: number, hex: string	Emesso quando il colore dello stop cambia.
updateOpacity Emesso quando l'opacità dello stop cambia.	index: number, opacity: number	Emesso quando l'opacità dello stop cambia.
remove Emesso quando lo stop viene rimosso.	index: number	Emesso quando lo stop viene rimosso.

Slot

Slot	Props	Description
default Contratto di rendering completo per lo stop del gradiente.	stato stop + handler di aggiornamento	Contratto di rendering completo per lo stop del gradiente.

Slot prop predefiniti

{
  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
}

Esempio

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

API correlate

• GradientEditorRoot
• GradientEditorBar