DokumentacjaKomponenty
Zakładki kategorii
Każda kategoria ma swój kolor w każdej kontrolce.
- 1Zakładka: górne rogi zaokrąglone 16 px, min. wysokość 42 px (44 px poniżej 1024 px)
- 2Pole ikony 24 px: glif kategorii 20 px w spoczynku; po wyborze w jego miejscu wyrasta krążek kategorii 24 px
- 3Etykieta 12 / 600 (14 px od 1280 px); poniżej 1280 px etykietę pokazuje tylko wybrana zakładka
- 4Wybrana: tło w tincie kategorii (8 %) i wewnętrzny cień wycięcia z góry i z boków
Warianty
Każda kategoria ma swój kolor: hover i wybór malują kolorem kategorii, nigdy akcentem systemu. Wyjątkiem są „Wszystkie zajęcia”: krążek chartreuse na tle deep-blue-50.
Wszystkie zajęcia 6.8:1 
Wydarzenia 5.0:1 
Miejsca 7.1:1 
Edukacja 6.7:1 
Sport 7.4:1 
Gastronomia 7.0:1 
Sztuka 5.5:1 
Zdrowie 9.5:1 Stany
Wymuszone poniżej dla jednej kategorii (Sport). Pasek wyżej reaguje na prawdziwy wskaźnik i klawiaturę; wybór wprowadza krążek w 300 ms.
Zajęcia sportowe Spoczynek Zajęcia sportowe Hover Zajęcia sportowe Fokus Zajęcia sportowe Wybrana Zajęcia sportowe Wybrana + hover
API
Propsy CategoryTabBar.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
label | string | – | Nazwa dostępna obszaru nawigacji (aria-label). |
items | lista zakładek | – | Każda zakładka: href, label, category, circleSrc (krążek 24 px, widoczny po wyborze), glyphSrc (glif 20 px, widoczny w spoczynku), current. |
items[].category | "all" | "education" | "sport" | "art" | "events" | "places" | "gastronomy" | "health" | – | Ustawia data-cat na zakładce: hover i wybór biorą kolor tej kategorii. |
items[].current | boolean | false | Zakładka bieżącego adresu; dostaje aria-current="page". |
link | komponent linku | – | Link routera wstrzykiwany przez aplikację; każda zakładka to prawdziwy link. |
lead | ReactNode | – | Element przed zakładkami, np. przycisk „Więcej filtrów”. |
Dostępność
- Kategoria jest częścią adresu, więc każda zakładka to link z aria-current="page" w nazwanym nav, a nie tablist: Wstecz wraca do poprzedniej kategorii, zakładkę da się otworzyć w nowej karcie, wyszukiwarka widzi adresy.
- Etykiety ukryte poniżej 1280 px są zwinięte tylko wizualnie; czytnik dalej czyta nazwę każdej zakładki.
- Cel dotyku: 44 px wysokości poniżej 1024 px; pierścień fokusu 3 px w tokenie ring, rysowany wewnątrz zakładki.
- Etykiety zostają w kolorze foreground na każdym tincie (17,7–19,5:1); wybrana zakładka na hover robi się głęboko niebieska (7,4–8,1:1).
- Tekst kategorii na tle kategorii: od 5,0:1 (wydarzenia) do 9,5:1 (zdrowie), wszystkie powyżej AA dla tekstu.
- Ikony są dekoracyjne (aria-hidden); kategorię nazywa etykieta.
