Komponenter
Pagination
Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.
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'> Forrige </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 1'>1</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2' aria-current='true'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item /> <Pagination.Item> <Pagination.Button aria-label='Side 9'>9</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 10'>10</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side'>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.
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' /> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 2'>2</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 3' aria-current='true'> 3 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Side 4'>4</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Neste side' /> </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)