FontPickerRoot

FontPickerRoot è un selettore font searchable headless basato sulle primitive Reka UI Combobox.

Props

Prop	Default	Type
listFamilies* Sorgente asincrona per le famiglie di font disponibili.	—	() => Promise<string[]>
triggerClass Classe opzionale per il trigger predefinito.	—	string | undefined
contentClass Classe opzionale per il contenuto del dropdown.	—	string | undefined
itemClass Classe opzionale per gli elementi predefiniti.	—	string | undefined
searchClass Classe opzionale per il campo di ricerca.	—	string | undefined
viewportClass Classe opzionale per il viewport di scorrimento.	—	string | undefined
emptyClass Classe opzionale per gli stati vuoti.	—	string | undefined
emptySearchText Testo mostrato quando la ricerca non restituisce font.	—	string | undefined
emptyFontsText Testo mostrato quando non ci sono font disponibili.	—	string | undefined
emptyFontsHint Testo helper opzionale per lo stato senza font.	—	string | undefined

Model

Prop	Default	Type
v-model* Famiglia di font selezionata.	—	string

Eventi

Event	Payload	Description
select	family: string	Emesso dopo la selezione di una famiglia di font.

Slot

Slot	Props	Description
trigger	{ value: string, open: boolean }	Contenuto trigger personalizzato.
search	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Slot input di ricerca personalizzato.
item	{ family: string, selected: boolean }	Renderer elemento personalizzato.
indicator	{ selected: boolean }	Indicatore di selezione personalizzato.
empty	—	Mostrato quando non ci sono font disponibili.

Esempio

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

API correlate

• useTypography