Intro
Med paginering kan man dele opp sider i seksjoner slik at brukerne ikke blir overveldet av for mye innhold eller data samtidig.
Egnet til:
- Navigasjon mellom relaterte sider/seksjoner
- Dele søkeresultater inn i flere sider
- Dele store mengder relatert innhold inn i flere sider, eksempelvis i tabeller.
Uegnet til:
- Å vise fremdrift
Eksempler
Varianter
Størrelse
Komponenten finnes i størrelsene medium, small og xsmall. Hvilken størrelse som passer best bestemmes individuelt.
Forrige og neste
Knappene som blar til forrige og neste kommer standard med kun chevron.
Label og chevron
Ved å skru på prop'en prevNextTexts kan forrige- og neste-knappen brukes med label og chevron.
Tilgjengelighet
Tastaturinteraksjon
Komponenten følger vanlig tabindex og implementerer standard interaksjon som <button> elementer.
| Kommando | Interaksjon |
|---|---|
| Tab | Fokus settes på neste element i tab rekkefølgen |
| Shift+Tab | Fokus settes på forrige element i tab rekkefølgen |
| Space | Velger side/knapp i komponenten |
| Enter | Velger side/knapp i komponenten |
Props
Pagination
- page number
- Current page @note Pagination indexing starts at 1
- siblingCount?number
- Number of always visible pages before and after the current page.
- boundaryCount?number
- Number of always visible pages at the beginning and end.
- onPageChange? ((page: number) => void)
- Callback when current page changes
- count number
- Total number of pages
- size?"medium" | "small" | "xsmall"
- Changes padding, height and font-size
- prevNextTexts?boolean
- Display text alongside "previous" and "next" icons
- renderItem?((item: PaginationItemProps) => ReactNode)
- Override pagination item rendering
- className? string
- ref? Ref<HTMLElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Pagination extends HTMLElement
Tokens
| Token | Fallback |
|---|---|
| --ac-pagination-text | --a-text-default |
| --ac-pagination-selected-bg | --a-surface-action-selected |
| --ac-pagination-selected-text | --a-text-on-action |