FontPickerRoot

FontPickerRoot ist ein headless durchsuchbares Schrift-Auswahl-Primitiv, das auf Reka UI Combobox-Primitiven aufbaut.

Props

Prop	Default	Type
listFamilies* Asynchrone Quelle für verfügbare Schriftfamilien.	—	() => Promise<string[]>
triggerClass Optionale Klasse für den Standard-Trigger.	—	string | undefined
contentClass Optionale Klasse für Dropdown-Inhalte.	—	string | undefined
itemClass Optionale Klasse für Standard-Elemente.	—	string | undefined
searchClass Optionale Klasse für das Sucheingabefeld.	—	string | undefined
viewportClass Optionale Klasse für den Scroll-Viewport.	—	string | undefined
emptyClass Optionale Klasse für leere Zustände.	—	string | undefined
emptySearchText Text, der angezeigt wird, wenn die Suche keine Schriften zurückgibt.	—	string | undefined
emptyFontsText Text, der angezeigt wird, wenn keine Schriften verfügbar sind.	—	string | undefined
emptyFontsHint Optionaler Hilfstext für den leeren-Schriften-Zustand.	—	string | undefined

Modell

Prop	Default	Type
v-model* Ausgewählte Schriftfamilie.	—	string

Ereignisse

Event	Payload	Description
select	family: string	Ausgelöst, nachdem eine Schriftfamilie ausgewählt wurde.

Slots

Slot	Props	Description
trigger	{ value: string, open: boolean }	Benutzerdefinierter Trigger-Inhalt.
search	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Benutzerdefinierter Sucheingabe-Slot.
item	{ family: string, selected: boolean }	Benutzerdefinierter Element-Renderer.
indicator	{ selected: boolean }	Benutzerdefinierter Auswahl-Indikator.
empty	—	Wird angezeigt, wenn keine Schriften verfügbar sind.

Beispiel

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

Verwandte APIs

• useTypography