GradientEditorRoot
GradientEditorRoot — headless-корневой примитив для редактирования градиента.
Управляет:
- состоянием активной точки
- переключением подтипа
- логикой добавления/удаления/обновления точек
- редактированием цвета активной точки
- производным фоном полосы
Props
| Prop | Default | Type |
|---|---|---|
fill*Текущее значение заливки градиентом. | — | Fill |
Events
| Event | Payload | Description |
|---|---|---|
update | fill: Fill | Генерируется при изменении заливки градиентом. |
Slots
| Slot | Props | Description |
|---|---|---|
default | editor 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>