Som angitt i live demoen finnes komponentet i medium og small. Hvilken versjon som passer best bestemmes individuelt. Vurderingsmoment for størrelse kan være ting som visuell dominans, klikkflate og plassering.
Medium og small
Label og indicator
Komponentets standarduttrykk inneholder både label og indicator, som med felles hit area gjør det enkelt å navigere til forrige og neste side.
Label og indicator
Indicator
Ved å velge bort label i varianten kan komponentet brukes kun med indicator.
Indicator
Tilgjengelighet
Interaksjon Tastatur
Komponenten følger vanlig tabindex og implementerer standard interaksjon som <button> elementer.
Kommando
Interaksjon
Tab
Fokus settes på neste element i tab rekkefølgen
ShiftTab
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
Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.
