GradientEditorRoot

GradientEditorRoot ist ein headless Wurzel-Primitiv für Verlaufsbearbeitung.

Es verwaltet:

• aktiven Stopp-Zustand
• Subtyp-Wechsel
• Stopp hinzufügen/entfernen/aktualisieren Logik
• aktive Farbbearbeitung
• abgeleiteten Balken-Hintergrund

Props

Prop	Default	Type
fill* Aktueller Verlaufsfüllungswert.	—	Fill

Ereignisse

Event	Payload	Description
update	fill: Fill	Ausgelöst, wenn sich die Verlaufsfüllung ändert.

Slots

Slot	Props	Description
default	Editor-Zustand + Handler	Vollständiger Verlaufs-Editor-Render-Vertrag.

Standard-Slot-Props

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

Beispiel

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

Verwandte APIs

• GradientEditorBar
• GradientEditorStop