LanguageSwitch

Krótki rząd kodów języków do górnego paska. Z onChange przełącza na miejscu; z href przy każdym języku linkuje do tej samej strony w tym języku.

PodglądLink do sekcji Podgląd

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

tsx

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

tsx

<LanguageSwitch label="Language" value={lang} onChange={setLang}
  languages={[{ code: 'pl', name: 'Polski' }, { code: 'en', name: 'English' }]} />

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

Tryb przycisków to grupa przycisków opcji; tryb linków to nav z aria-current na aktywnym języku i hreflang na każdym linku.
Każda opcja jest odczytywana jako kod i własna nazwa, na przykład „PL Polski”, z oznaczeniem lang, więc głos się przełącza.
Aktywny kod jest podkreślony, a nie tylko kolorowy.

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