FillPickerRoot

FillPickerRoot es un primitivo headless de selector de relleno basado en popover para rellenos sólidos, degradados e imágenes.

Props

Prop	Default	Type
fill* Valor de relleno actual.	—	Fill
contentClass Clase opcional para el contenido del popover.	—	string | undefined
swatchClass Clase opcional para el botón trigger por defecto.	—	string | undefined

Eventos

Event	Payload	Description
update	fill: Fill	Emitido cuando el relleno cambia.

Slots

Slot	Props	Description
trigger	swatch style	Trigger personalizado con estilo de fondo de muestra.
default	fill state + conversion helpers	Contenido principal del editor de relleno.

Props del slot trigger

{
  style: Record<string, string>
}

Props del slot default

{
  fill: Fill
  category: 'SOLID' | 'GRADIENT' | 'IMAGE'
  toSolid: () => void
  toGradient: () => void
  toImage: () => void
  update: (fill: Fill) => void
}

Ejemplo

<FillPickerRoot :fill="fill" @update="fill = $event">
  <template #default="{ fill, category, toSolid, toGradient, update }">
    <div>{{ category }}</div>
    <button @click="toSolid">Sólido</button>
    <button @click="toGradient">Degradado</button>
    <MyFillEditor :fill="fill" @change="update" />
  </template>
</FillPickerRoot>

APIs relacionadas

• GradientEditorRoot