Intro
Med paginering kan man dele opp sider i seksjoner slik at brukerne ikke blir overveldet av for mye innhold eller data samtidig. Et situasjonseksempel kan være å bryte opp tabellvisninger i flere sider slik at man får en overkommelig mengde innhold å forholde seg til i hvert skjermbilde. Hvor tidlig sidene skal paginere, hvor pagineringsfeltet skal plasseres, eller hvor mange pagineringslinker som skal vises samtidig bestemmes individuelt.
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.
Når bør man vurdere noe annet:
- Erstatter ikke tabs, stepper eller andre progresjonsmenyer
- For eksterne flater kan innhold under 2-3 skjermlengder vurderes uten paginering
Anatomi
- 1. Indicator
Tar deg et steg i hver retning.
- 2. Label
Tar deg et steg i hver retning.
- 3. Selected
Det sidetallet du er på.
- 4. Page number
Sidenummerne som ikke er valgt.
- 5. Ellipsis
Ellipsen angir at det finnes flere sider / seksjoner.
- 6. Last page
Både første og siste side er alltid tilgjengelig visuelt i raden.
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.
Hvordan bruke pagination
Klikker du på tekst eller retningspil navigerer du til forrige eller neste side, man kan også klikke direkte på et sidetall. Første og siste side vil alltid være tilgjengelig i pagineringsraden.
Første side
Om du står på første side i pagineringen er det ikke mulig å gå til forrige, derfor er valget for dette borte.
Siste side
Om du står på siste side i pagineringen er det ikke mulig å gå til neste, derfor er valget for dette borte.
Tilgjengelighet
Interaksjon Tastatur
Komponenten følger vanlig tabindex og implementerer standard interaksjon som <button> elementer.
| Kommando | Beskrivelse |
|---|---|
| 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 |