Nawigacja
Sposoby przechodzenia między widokami, stronami i filtrami: karty, karty-linki, wybory segmentowe, paski kart, które można zamknąć, ścieżki nawigacji, paginacja, chipy filtrów i kontrolki języka. Budowane z celem WCAG 2.2 AA, od szerokości 320 px.
Strony: 11, eksporty: 12
- Tabs
- TabPanel
- LinkTabs
- Segmented
- ClosableTabs
- Breadcrumbs
- Pagination
- FilterChips
- ChipCount
- LanguageSwitch
- LanguagePicker
- LanguageBanner
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { Tabs, TabPanel, LinkTabs, Segmented, … } from '@skribly/ui/navigation'Strony tej grupyLink do sekcji Strony tej grupy
- TabsPrzełą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
- LinkTabsWyglądają jak Tabs, ale każda karta jest linkiem do innej strony. Wybierz je dla nawigacji po sekcjach, która zmienia adres.LinkTabs
- SegmentedJeden wybór z dwóch do pięciu, wszystkie widoczne naraz, na przykład tryb widoku albo okres. Dla większej liczby opcji użyj listy wyboru.Segmented
- ClosableTabsPasek otwartych dokumentów albo stron, które czytelnik może zamknąć, jak w edytorze lub przeglądarce. Kropka oznacza niezapisane zmiany i zamienia się w przycisk zamknięcia po najechaniu lub przy fokusie.ClosableTabs
- BreadcrumbsPokazuje, gdzie leży strona, i linkuje do każdego poziomu nad nią. Przy ustawionym moreLabel długie ścieżki składają środkowe poziomy w menu.Breadcrumbs
- PaginationPrzechodzi przez długą listę podzieloną na strony. Przekaż getHref dla prawdziwych linków, które działają bez JavaScriptu, albo onChange dla przycisków wewnątrz aplikacji. Strona w Astro dzieli długą listę na statyczne strony komponentem Pagination.astro, który wygląda tak samo.Pagination
- FilterChipsSzybkie filtry nad listą, z opcjonalnym licznikiem przy każdym. Tryb multiple przełącza każdy chip osobno; tryb single wybiera jeden. ChipCount to plakietka z licznikiem, używana też wewnątrz kart.FilterChips, ChipCount
- ChipCountMały licznik obok etykiety: nieprzeczytane, otwarte zgłoszenia albo wyniki. Skraca długie liczby, na przykład do 99+.ChipCount
- LanguageSwitchKrótki rząd kodów języków do górnego paska. Z onChange przełącza na miejscu; z href przy każdym języku linkuje do tej samej strony w tym języku.LanguageSwitch
- LanguagePickerZnajduje język na długiej liście po jego własnej nazwie, nazwie angielskiej albo kodzie, z opcjonalnym polem na dowolny inny kod. Wybierz go do ustawień; dla dwóch lub trzech języków użyj LanguageSwitch.LanguagePicker
- LanguageBannerMówi czytelnikowi, co dzieje się z tłumaczeniem: pobieranie, offline, niepowodzenie albo gotowe. Może powtórzyć komunikat w drugim języku, gdy pierwszego jeszcze brakuje.LanguageBanner