openpencil/packages/docs/programmable/sdk/api/components/gradient-editor-bar.md
2026-03-24 23:24:08 +03:00

1.6 KiB

title description
GradientEditorBar Headless draggable bar primitive for gradient stops.

GradientEditorBar

GradientEditorBar is the draggable bar primitive used inside gradient editors.

Props

Events

Slots

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

Example

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