GradientEditorBar

GradientEditorBar ist das ziehbare Balken-Primitiv, das innerhalb von Verlaufs-Editoren verwendet wird.

Props

Prop	Default	Type
stops* Aktuelle Verlaufsstopps.	—	GradientStop[]
activeStopIndex* Aktiver Stopp-Index.	—	number
barBackground* CSS-Hintergrund-String für den Balken.	—	string

Ereignisse

Event	Payload	Description
selectStop	index: number	Ausgelöst, wenn ein Stopp ausgewählt wird.
dragStop	index: number, position: number	Ausgelöst, während ein Stopp gezogen wird.

Slots

Slot	Props	Description
default	Balken-Zustand + Zieh-Handler	Vollständiger Verlaufsbalken-Render-Vertrag.

Standard-Slot-Props

{
  stops: GradientStop[]
  activeStopIndex: number
  barBackground: string
  barRef: (el: unknown) => void
  onStopPointerDown: (index: number, event: PointerEvent) => void
  onPointerMove: (event: PointerEvent) => void
  onPointerUp: () => void
  draggingIndex: number | null
}

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>

Verwandte APIs

• GradientEditorRoot
• GradientEditorStop