- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
Pagination
Pakke: ds-navigation
Pagination (sidevelger) deler opp innhold eller sider i seksjoner. Brukeren kan bla frem og tilbake, og slippe å bli overveldet av for mye innhold samtidig.
Eksempel
Egnet til:
- dele store mengder relatert innhold inn i flere sider som for eksempel tabeller
- å navigere mellom sider i seksjoner
- å dele søkeresultater inn i flere sider
Uegnet til:
- å dele opp uendelig innhold
Teknisk dokumentasjon
Se Pagination i Storybook for tekniske detaljer.
Hvordan bruke komponenten
Pagination brukes alltid sammen med en annen komponent, som regel tabell eller søkeresultat.
Justere komponenten visuelt
Pagination er en komponent som må fungere i mange ulike settinger, og er derfor gjort dynamisk og tilpasningsvennlig. Pagination viser alltid første og siste sidetall, og det skal alltid være et klikkbart sidetall ved siden av siden som er aktiv. I tillegg kan du gjøre egne tilpasninger:
- justere antall treff som vises per side, 10 er standard.
- endre bredden ved å justere antall klikkbare elementer ved siden av den aktive siden (siblings).
- teksten i forrige/neste-knappene kan skjules, og det vil da kun vises en pil mot henholdsvis venstre og høyre. Standard er at teksten vises.
- teksten for sideoppsummering vises som standard, men du kan velge å skjule den.
Gode bruksmønster
- Komponenten skal henge under og være like bred som den tilhørende komponenten (tabell eller søkeresultat).
- Når du stiller inn tallet på sider i tallrekken der brukeren blar fra, skal du ta hensyn til hvor mye data som vises og sannsynligheten for at brukeren vil bla i opplysningene
- På mobil anbefaler vi å ikke ha flere enn tre tall synlig i tallrekken på grunn av plassen på skjermen.
- Skjul komponenten når du ikke har noen sider å bla i. For å tydeliggjøre hva som skjer kan du gjerne vise en kort tekst i toppen av innholdet du ellers ville ha paginert.
Universell utforming
- Når du navigerer med tastatur i komponenten, skal fokus beholdes der du er, for eksempel når du velger et sidetall.
- Skjermleser skal lese opp teksten om hva som vises, når du endrer sidetall.