LinkTabs

Wyglądają jak Tabs, ale każda karta jest linkiem do innej strony. Wybierz je dla nawigacji po sekcjach, która zmienia adres.

LinkTabs

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: LinkTabs

Noc, podgląd: LinkTabs

Wysoki kontrast, podgląd: LinkTabs

UżycieLink do sekcji Użycie

tsx

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

tsx

<LinkTabs label="Project navigation" currentId="list" items={[
  { id: 'board', label: 'Board', href: '/p/board' },
  { id: 'list', label: 'List', href: '/p/list' }
]} />

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ść

Landmark nav ze zwykłymi linkami, więc Tab przechodzi po nich, a przeglądarka zachowuje historię.
Bieżąca strona ma aria-current="page" i podkreślenie, nigdy sam kolor.
Routing w przeglądarce działa przez RouterProvider.

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