FontPickerRoot

FontPickerRoot to bezstanowy przeszukiwalny selektor czcionek zbudowany na prymitywach Reka UI Combobox.

Props

Prop	Default	Type
listFamilies* Asynchroniczne źródło dostępnych rodzin czcionek.	—	() => Promise<string[]>
triggerClass Opcjonalna klasa dla domyślnego wyzwalacza.	—	string | undefined
contentClass Opcjonalna klasa dla zawartości listy rozwijanej.	—	string | undefined
itemClass Opcjonalna klasa dla domyślnych elementów.	—	string | undefined
searchClass Opcjonalna klasa dla pola wejściowego wyszukiwania.	—	string | undefined
viewportClass Opcjonalna klasa dla obszaru przewijania.	—	string | undefined
emptyClass Opcjonalna klasa dla stanów pustych.	—	string | undefined
emptySearchText Tekst wyświetlany gdy wyszukiwanie nie zwraca czcionek.	—	string | undefined
emptyFontsText Tekst wyświetlany gdy brak dostępnych czcionek.	—	string | undefined
emptyFontsHint Opcjonalny tekst pomocniczy dla stanu braku czcionek.	—	string | undefined

Model

Prop	Default	Type
v-model* Wybrana rodzina czcionek.	—	string

Zdarzenia

Event	Payload	Description
select	family: string	Emitowane po wyborze rodziny czcionek.

Sloty

Slot	Props	Description
trigger	{ value: string, open: boolean }	Niestandardowa zawartość wyzwalacza.
search	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Niestandardowy slot pola wejściowego wyszukiwania.
item	{ family: string, selected: boolean }	Niestandardowy renderer elementu.
indicator	{ selected: boolean }	Niestandardowy wskaźnik zaznaczenia.
empty	—	Wyświetlany gdy brak dostępnych czcionek.

Przykład

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

Powiązane API

• useTypography