Skip to content

GradientEditorRoot

GradientEditorRoot — headless-корневой примитив для редактирования градиента.

Управляет:

  • состоянием активной точки
  • переключением подтипа
  • логикой добавления/удаления/обновления точек
  • редактированием цвета активной точки
  • производным фоном полосы

Props

PropDefaultType
fill*
Текущее значение заливки градиентом.
Fill

Events

EventPayloadDescription
updatefill: FillГенерируется при изменении заливки градиентом.

Slots

SlotPropsDescription
defaulteditor state + handlersПолный контракт рендеринга редактора градиента.

Пропы слота default

ts
{
  stops: GradientStop[]
  subtype: GradientSubtype
  subtypes: Array<{ value: GradientSubtype; label: string }>
  activeStopIndex: number
  activeColor: Color
  barBackground: string
  setSubtype: (type: GradientSubtype) => void
  selectStop: (index: number) => void
  addStop: () => void
  removeStop: (index: number) => void
  updateStopPosition: (index: number, position: number) => void
  updateStopColor: (index: number, hex: string) => void
  updateStopOpacity: (index: number, opacity: number) => void
  updateActiveColor: (color: Color) => void
  dragStop: (index: number, position: number) => void
}

Пример

vue
<GradientEditorRoot :fill="fill" @update="fill = $event" v-slot="ctx">
  <MyGradientUI v-bind="ctx" />
</GradientEditorRoot>

Связанные API

Released under the MIT License.