GradientEditorStop

GradientEditorStop es un primitivo headless para renderizar y editar una sola parada de degradado.

Props

Prop	Default	Type
stop* Valor actual de la parada.	—	GradientStop
index* Índice actual de la parada.	—	number
active* Si esta parada está activa.	—	boolean

Eventos

Event	Payload	Description
select Emitido cuando se selecciona la parada.	index: number	Emitido cuando se selecciona la parada.
updatePosition Emitido cuando cambia la posición de la parada.	index: number, position: number	Emitido cuando cambia la posición de la parada.
updateColor Emitido cuando cambia el color de la parada.	index: number, hex: string	Emitido cuando cambia el color de la parada.
updateOpacity Emitido cuando cambia la opacidad de la parada.	index: number, opacity: number	Emitido cuando cambia la opacidad de la parada.
remove Emitido cuando se elimina la parada.	index: number	Emitido cuando se elimina la parada.

Slots

Slot	Props	Description
default Contrato completo de renderizado de la parada de degradado.	stop state + update handlers	Contrato completo de renderizado de la parada de degradado.

Props del slot default

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

Ejemplo

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

APIs relacionadas

• GradientEditorRoot
• GradientEditorBar