DokumentacjaKomponenty
Dolna nawigacja
Nawigacja na telefonie dla rodzica i organizatora.
Warianty
Dwie role, jeden komponent. Kolejność i ikony są takie jak w sidebarze danego panelu, więc na telefonie te same sekcje stoją w tej samej kolejności.
Stany
Pozycja ma trzy wyglądy: spoczynek (slate-400), bieżąca (biała albo chartreuse) i fokus z klawiatury (tło slate-900). Zmiana koloru to całe przejście; pasek dotykowy nie ma stanu hover.
API
Propsy BottomNav. Ikony i teksty przychodzą z aplikacji, więc komponent nie zawiera tekstów ani bibliotek ikon.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
role | "parent" | "organizer" | – | Rodzic: bieżąca pozycja na biało. Organizator: bieżąca pozycja w chartreuse marki i przycisk „Więcej”. |
label | string | – | Nazwa dostępna obszaru nawigacji (aria-label), np. „Nawigacja rodzica”. |
items | lista pozycji | – | Każda pozycja: href, label (krótki podpis pod ikoną), ariaLabel (pełna nazwa dla czytnika), icon, current. Pięć u rodzica, cztery plus „Więcej” u organizatora. |
more | { label, icon, title, closeLabel, items } | – | Opcjonalny przycisk „Więcej”, który otwiera dolny arkusz z pozostałymi sekcjami sidebara; świeci się, gdy któraś z nich jest bieżąca. |
link | komponent linku | – | Link routera wstrzykiwany przez aplikację. |
Dostępność
- Nazwany obszar nav z linkami; bieżąca sekcja ma aria-current="page", więc „bieżąca” nie wynika z samego koloru.
- Uczciwa uwaga: w produkcie krótkie podpisy dostają dla czytnika dłuższe nazwy („Rezerwacje” → „Moje rezerwacje”, „Panel” → „Panel główny”). Gdy widocznego słowa nie ma w nazwie, łamie to WCAG 2.5.3 (etykieta w nazwie): osoba sterująca głosem mówi podpis i nic się nie dzieje. Rekomendacja: nazwy zaczynające się od podpisu. Podgląd na tej stronie używa podpisu jako nazwy.
- „Więcej” to przycisk z aria-haspopup="dialog"; arkusz to natywne okno modalne: pułapka fokusu, Esc zamyka, fokus wraca na „Więcej”, dotknięcie przygaszonego ekranu zamyka.
- Cele: pięć równych kolumn, co najmniej 44 px wysokości.
- Kontrast na slate-950: spoczynek 7,9:1, bieżąca biała 20,2:1, bieżąca chartreuse 17,8:1.