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 Emitido cuando el relleno cambia.	fill: Fill	Emitido cuando el relleno cambia.

Slots

Slot	Props	Description
trigger Trigger personalizado con estilo de fondo de muestra.	swatch style	Trigger personalizado con estilo de fondo de muestra.
default Contenido principal del editor de relleno.	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