FontPickerRoot

FontPickerRoot es un selector de fuente headless con búsqueda construido sobre los primitivos Combobox de Reka UI.

Props

Prop	Default	Type
listFamilies* Fuente asíncrona de las familias tipográficas disponibles.	—	() => Promise<string[]>
triggerClass Clase opcional para el trigger por defecto.	—	string | undefined
contentClass Clase opcional para el contenido desplegable.	—	string | undefined
itemClass Clase opcional para los elementos por defecto.	—	string | undefined
searchClass Clase opcional para el input de búsqueda.	—	string | undefined
viewportClass Clase opcional para el viewport de scroll.	—	string | undefined
emptyClass Clase opcional para los estados vacíos.	—	string | undefined
emptySearchText Texto mostrado cuando la búsqueda no devuelve fuentes.	—	string | undefined
emptyFontsText Texto mostrado cuando no hay fuentes disponibles.	—	string | undefined
emptyFontsHint Texto de ayuda opcional para el estado de fuentes vacío.	—	string | undefined

Model

Prop	Default	Type
v-model* Familia tipográfica seleccionada.	—	string

Eventos

Event	Payload	Description
select Emitido tras seleccionar una familia tipográfica.	family: string	Emitido tras seleccionar una familia tipográfica.

Slots

Slot	Props	Description
trigger Contenido del trigger personalizado.	{ value: string, open: boolean }	Contenido del trigger personalizado.
search Slot del input de búsqueda personalizado.	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Slot del input de búsqueda personalizado.
item Renderer de elemento personalizado.	{ family: string, selected: boolean }	Renderer de elemento personalizado.
indicator Indicador de seleccionado personalizado.	{ selected: boolean }	Indicador de seleccionado personalizado.
empty Se muestra cuando no hay fuentes disponibles.	—	Se muestra cuando no hay fuentes disponibles.

Ejemplo

<FontPickerRoot v-model="fontFamily" :list-families="listFamilies">
  <template #trigger="{ value }">
    <button class="w-full truncate">{{ value }}</button>
  </template>
</FontPickerRoot>

APIs relacionadas

• useTypography