GradientEditorBar

GradientEditorBar stellt State und Pointer handlers zum Rendern eines Gradient bar bereit. Der Component behandelt Selection und Drag der Stops.

Props

Prop	Default	Type
stops* Aktuelle Gradient stops.	—	GradientStop[]
activeStopIndex* Index des Active stop.	—	number
barBackground* CSS background des Bar.	—	string

Events

Event	Payload	Description
selectStop Wird bei Auswahl eines Stop ausgegeben.	index: number	Wird bei Auswahl eines Stop ausgegeben.
dragStop Wird während des Drag eines Stop ausgegeben.	index: number, position: number	Wird während des Drag eines Stop ausgegeben.

Beispiel

<GradientEditorBar
  :stops="stops"
  :active-stop-index="activeStopIndex"
  :bar-background="barBackground"
  @select-stop="selectStop"
  @drag-stop="dragStop"
  v-slot="ctx"
>
  <MyGradientBar v-bind="ctx" />
</GradientEditorBar>

Siehe auch

• GradientEditorRoot
• GradientEditorStop