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
- Type:
number
- Description:
siblingCount?
- Type:
number
- Default:1
- Description:
boundaryCount?
- Type:
number
- Default:1
- Description:
onPageChange?
- Type:
((page: number) => void)
- Description:
count
- Type:
number
- Description:
size?
- Type:
"medium" | "small" | "xsmall"
- Default:"medium"
- Description:
prevNextTexts?
- Type:
boolean
- Default:false
- Description:
renderItem?
- Type:
((item: PaginationItemProps) => ReactNode)
- Default:(item: PaginationItemProps) => <PaginationItem {...item} />
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLElement>
- Description:
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 |