DsPagination

Sidenavigasjon.

Bruk

Når bør du bruke DsPagination?

• Til å dele opp store datasett eller lange lister over flere sider.
• Når brukeren trenger kontroll over hvilken del av innholdet som vises.
• I tabeller, søkeresultater eller listevisninger med mange elementer.

Når bør du unngå DsPagination?

• Når det er færre elementer enn en enkelt side. Vis alt innholdet direkte.
• Når uendelig scrolling gir en bedre brukeropplevelse, for eksempel i sosiale feeder.

Eksempler

Grunnleggende bruk

DsPagination — interaktiv forhåndsvisning

Åpne i nytt vindu ↗

DsPagination(
  currentPage: 3,
  totalPages: 10,
  onPageChanged: (side) => lastSide(side),
)

Med størrelse

DsPagination(
  currentPage: 1,
  totalPages: 5,
  size: DsSize.sm,
  onPageChanged: (side) => lastSide(side),
)

Retningslinjer

• Vis tydelig hvilken side brukeren er på.
• Plasser pagineringskomponenten konsekvent, vanligvis under innholdet den kontrollerer.
• Vis totalt antall sider eller resultater når det er hensiktsmessig.

Tekst

• Knappetekster bør være tydelige: «Forrige» og «Neste» eller pil-ikoner.

Egenskaper

Egenskap	Type	Standard	Beskrivelse
currentPage	int	påkrevd	Gjeldende sidenummer
totalPages	int	påkrevd	Totalt antall sider
onPageChanged	ValueChanged<int>	påkrevd	Kalles når bruker navigerer til en annen side
size	DsSize?	null	Størrelse på pagineringskomponenten

Import

import 'package:designsystemet_flutter/components.dart';

Semantikk

• Navigasjonsknapper er fokuserbare og kan aktiveres med tastatur.
• Gjeldende side er tydelig markert visuelt og annonseres med aria-current for skjermlesere.
• Komponenten bruker nav-semantikk for å indikere navigasjonsområdet.

Tastaturinteraksjon

Tast	Handling
Tab	Flytter fokus mellom pagineringsknappene.
Enter / Mellomrom	Aktiverer den fokuserte sideknappen og navigerer til den siden.

Fokusindikator

• Synlig fokusindikator ved tastaturnavigasjon.

Fargekontrast

• Oppfyller WCAG 2.1 AA kontrastkrav.

Har du innspill til denne komponenten? Send innspill på GitHub