DokumentacjaKomponenty
Arkusz
Jeden mechanizm okna dla filtrów i menu „Więcej”.
Filtry
Rodzaj zajęć
EdukacjaZajęcia sportoweZajęcia artystyczne
Forma zajęć
JednorazoweCykliczneTurnus
Filtry
Rodzaj zajęć
EdukacjaZajęcia sportoweZajęcia artystyczne
- 1Przygaszenie: reszta ekranu jest przyciemniona (50 % czerni) i nieaktywna; klik zamyka arkusz
- 2Arkusz: biały, górne rogi 24 px, przyklejony do dolnej krawędzi
- 3Nagłówek: tytuł (Sora 24 w panelu, 18 / 600 w menu) i „X” 44 px
- 4Treść: przewija się sama, strona pod spodem stoi
- 5Stopka: linia u góry, akcja poboczna po lewej, główna po prawej
Warianty
Jeden mechanizm, dwa warianty. Panel trzyma filtry zajęć na telefonie; menu trzyma pozycje „Więcej” z dolnej nawigacji organizatora.
Filtry
Forma zajęć
JednorazoweCykliczneTurnus
Więcej
Stany
Arkusz jest otwarty albo zamknięty; stany ma jego „X”. W panelu hover daje „X” jasnoniebieskie tło i głęboko niebieską ikonę; w menu ramka 2 px robi się głęboko niebieska. Fokus pokazuje pierścień 3 px. Hover i fokus są poniżej wymuszone.
Spoczynek Hover Fokus
Spoczynek Hover Fokus
API
Sterowany przez open i onClose; resztę robi przeglądarka.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
open | boolean | – | Otwiera arkusz przez showModal() i zamyka go przy false. |
onClose | funkcja | – | Wywoływana po Esc, kliknięciu przygaszonego tła, „X” albo close() z treści. |
title | tekst | – | Nagłówek arkusza; nazywa też okno (aria-labelledby). |
closeLabel | string | – | Nazwa dostępna przycisku „X”. |
footer | treść | – | Opcjonalna stopka z linią, np. „Wyczyść wszystko” i „Pokaż N zajęć”. |
variant | "panel" | "menu" | "panel" | panel: filtry, przewijana treść, do 88 % wysokości. menu: „Więcej”, do 85 %. |
children | treść | – | Treść arkusza. |
className | string | – | Dodatkowe klasy okna. |
Dostępność
- Natywne okno dialog otwierane przez showModal(): przeglądarka zamyka fokus w środku, Esc je zamyka, fokus wraca do elementu, który je otworzył, a reszta strony staje się nieaktywna.
- Nagłówek nazywa okno przez aria-labelledby, więc czytnik ogłasza „Filtry, okno dialogowe”.
- „X” to przycisk 44 × 44 px z nazwą tekstową (closeLabel).
- Klik w przygaszone tło zamyka arkusz, ale nigdy nie jest jedyną drogą: Esc i „X” działają zawsze.
- Kontrast: nagłówek i treść 20,2:1 na bieli; stopka uwzględnia bezpieczny obszar, więc przyciski nie wchodzą pod pasek systemowy telefonu.
Dobre praktyki
Więcej
Więcej