Komponenter
Pagination
Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.
HTML
Trykk Enter for å redigere
Unable to parse html
const Preview = () => { return ( <Pagination aria-label='pagineringsmeny'> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' data-variant='tertiary'> Forrige </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 1' data-variant='tertiary'> 1 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' data-variant='primary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item /> <Pagination.Item> <Pagination.Button aria-label='Side 9' data-variant='tertiary'> 9 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 10' data-variant='tertiary'> 10 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' data-variant='tertiary'> Neste </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Preview />)
Bruk pagination når
- søkeresultater eller store mengder data skal deles inn i flere sider
- brukeren har behov for å vite hvor de befinner seg i en større mengde innhold
- lasting av hele datamengden ville vært for tungt eller gitt dårlig ytelse
Unngå pagination når
- det totale innholdet er så lite at én side er tilstrekkelig
- du skal dele inn et skjema i flere sider
- fremdrift skal vises
Eksempel
Mobil variant
For mobile enheter kan du vise færre sider og fjerne tekst for forrige/neste knapper.
HTML
Trykk Enter for å redigere
Unable to parse html
const Mobile = () => { return ( <Pagination aria-label='Pagination menu'> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Forrige side' data-variant='tertiary' /> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' data-variant='tertiary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 3'>3</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 4' data-variant='tertiary'> 4 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' data-variant='tertiary' /> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<Mobile />)
Retningslinjer
Bruk pagination når innholdet er for stort for én side, for eksempel ved søkeresultater eller lange lister, og brukeren trenger å navigere frem og tilbake. Vi deler kun opp innhold i flere sider når det forbedrer lastetiden eller brukervennligheten.
Tekst
Vi bruker et fast mønster for pagination med ord: «Forrige» og «Neste».
Unngå «Forrige side», «Neste side», «Gå tilbake», «Gå videre», «Videre» og «Tilbake».
Rediger denne siden på github.com (åpnes i ny fane)