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 å:
- Navigere mellom relaterte sider/seksjoner
- Dele søkeresultater inn i flere sider
- Dele store mengder relatert innhold inn i flere sider, eksempelvis i tabeller.
Vurder noe annet:
- Erstatter ikke tabs, stepper eller andre progresjonsmenyer
- For eksterne flater kan innhold under 2-3 skjermlengder vurderes uten paginering
Eksempler
Varianter
Størrelse
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.
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.
Indicator
Ved å velge bort label i varianten kan komponentet brukes kun med 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
- siblingCount?number
- boundaryCount?number
- onPageChange? ((page: number) => void)
- count number
- size?"medium" | "small" | "xsmall"
- prevNextTexts?boolean
- renderItem?((item: PaginationItemProps) => ReactElement<any, any> | null)
- className? string
- ref? Ref<HTMLElement>
- Current page
@note Pagination indexing starts at 1
- Number of always visible pages before and after the current page.
- Number of always visible pages at the beginning and end.
- Callback when current page changes
- Total number of pages
- Changes padding, height and font-size
- Display text alongside "previous" and "next" icons
- Override pagination item rendering
- Pagination extends HTMLElement