Skip to content

FontPickerRoot

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

Props

PropDefaultType
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

PropDefaultType
v-model*
Wybrana rodzina czcionek.
string

Zdarzenia

EventPayloadDescription
select
Emitowane po wyborze rodziny czcionek.
family: stringEmitowane po wyborze rodziny czcionek.

Sloty

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

Przykład

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

Powiązane API

Released under the MIT License.