LanguagePicker

Znajduje język na długiej liście po jego własnej nazwie, nazwie angielskiej albo kodzie, z opcjonalnym polem na dowolny inny kod. Wybierz go do ustawień; dla dwóch lub trzech języków użyj LanguageSwitch.

LanguagePicker

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: LanguagePicker

Interface language

Noc, podgląd: LanguagePicker

Interface language

Wysoki kontrast, podgląd: LanguagePicker

Interface language

UżycieLink do sekcji Użycie

tsx

import { LanguagePicker } from '@skribly/ui/navigation'

tsx

<LanguagePicker label="Interface language" languages={languages} value={lang} onChange={setLang}
  emptyLabel="No language matches."
  custom={{ label: 'Other code', buttonLabel: 'Use code', errorLabel: 'Enter a code such as ga or pt-BR.' }} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Pole wyszukiwania filtruje listę podczas pisania; strzałka w górę i w dół przechodzi po dopasowaniach, a Enter wybiera jedno, podczas gdy fokus zostaje w polu.
Nazwy mają własne lang.
Błędny własny kod oznacza pole jako niepoprawne, łączy komunikat przez aria-describedby i przenosi fokus z powrotem do pola.
Lista przewija się we własnym polu.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.