Tabs
Przełącza między panelami jednego widoku bez opuszczania strony. Wybierz je, gdy panele należą do siebie; gdy każda karta ma własny adres, użyj LinkTabs.
- Tabs
- TabPanel
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
Noc, podgląd: Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
Wysoki kontrast, podgląd: Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
UżycieLink do sekcji Użycie
import { Tabs, TabPanel } from '@skribly/ui/navigation'<Tabs label="Project sections" tabs={[{ id: 'board', label: 'Board' }, { id: 'list', label: 'List', count: 12, countLabel: '12 issues' }]}>
<TabPanel id="board">…</TabPanel>
<TabPanel id="list">…</TabPanel>
</Tabs>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ść
- Tab wchodzi do listy kart na zaznaczonej karcie; strzałka w lewo i w prawo (w górę i w dół w układzie pionowym), Home i End przesuwają i zaznaczają; kolejny Tab przechodzi do panelu.
- Czytniki ekranu odczytują kartę, pozycję i stan zaznaczenia, a panel ma etykietę z jego karty.
- Podkreślenie jest malowane kolorem Highlight w trybie wymuszonych kolorów.
- Pasek przewija się sam, gdy karty się nie mieszczą, a pionowe karty układają się nad panelem na wąskich ekranach.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.