Pagination

Przechodzi 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

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Pagination

Noc, podgląd: Pagination

Wysoki kontrast, podgląd: Pagination

UżycieLink do sekcji Użycie

tsx

import { Pagination } from '@skribly/ui/navigation'

tsx

<Pagination label="Pages" page={page} pageCount={24} onChange={setPage}
  previousLabel="Previous" nextLabel="Next" firstLabel="First page" lastLabel="Last page"
  pageLabel={(n) => `Page ${n}`} statusLabel={(n, total) => `Page ${n} of ${total}`} />

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ść

Nazwany landmark nav.
Każda kontrolka strony ma nazwę, na przykład „Page 3”, bieżąca ma aria-current="page" i wypełniony styl, a Poprzednia i Następna są wyłączone na końcach.
Gdy jej pole jest wąskie, numery stron ustępują statusowi „Page 6 of 24” z Pierwszą i Ostatnią obok, a Poprzednia i Następna zachowują tylko strzałki, nadal nazwane dla czytników ekranu.
Na ekranie dotykowym każdy cel ma 44 px.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.