Paginering (Pagination)

Paginering lar brukerne navigere mellom sider med innhold. Komponenten støtter både et kjent antall sider og en ubestemt modus (hvor man ikke vet totalt antall sider).

Eksempel

<adb-pagination current-page="7" total-pages="10" total-items="100"></adb-pagination>

Med sidestørrelsesvelger

Vis en dropdown som lar brukeren velge hvor mange elementer som vises per side.

<adb-pagination
  current-page="1"
  total-pages="22"
  total-items="216"
  page-size="10"
  page-size-options="10,25,50,100"
></adb-pagination>

Ubestemt modus (indeterminate)

Når du ikke vet totalt antall sider (f.eks. markørbasert paginering), bruk has-more-pages i stedet for total-pages.

<adb-pagination current-page="3" has-more-pages></adb-pagination>

Gå til side

Vis et valgfritt «hopp til side»-felt med show-jump-to-attributtet. I kjent modus begrenses det til siste side, i ubestemt modus til sist kjente side.

<adb-pagination total-pages="20" show-jump-to></adb-pagination>

Størrelser

Komponenten finnes i tre størrelser: sm, md (standard) og lg.

<adb-pagination total-pages="10" page-size="10" page-size-options="10,25,50" show-jump-to size="sm"></adb-pagination>
<adb-pagination total-pages="10" page-size="10" page-size-options="10,25,50" show-jump-to size="md"></adb-pagination>
<adb-pagination total-pages="10" page-size="10" page-size-options="10,25,50" show-jump-to size="lg"></adb-pagination>

Responsiv oppførsel

Komponenten tilpasser antall sideknapper til sin egen bredde. visible-pages fungerer som en øvre grense, og på smale skjermer reduseres antallet ned til min-visible-pages (standard 3) slik at navigasjonen får plass på én rad. På brede skjermer vises hele visible-pages-vinduet.

Tilpasningen skjer via en intern ResizeObserver. Endre bredden på beholderen under for å se hvordan antallet knapper justeres.

<adb-pagination
  current-page="30"
  total-pages="60"
  visible-pages="5"
  min-visible-pages="3"
  size="lg"
></adb-pagination>

Når ResizeObserver ikke er tilgjengelig (SSR / svært gamle nettlesere), faller komponenten tilbake til det statiske visible-pages-antallet, med CSS-ombrytning av nav som siste sikkerhetsnett.

API

Attributter

Attributt	Type	Standard	Beskrivelse
current-page	number	1	Aktiv side (1-basert). Administreres internt, reflekteres til attributt.
total-pages	number	—	Totalt antall sider. Utelat for ubestemt modus.
has-more-pages	boolean	false	Om det finnes flere sider (ubestemt modus).
visible-pages	number	5	Øvre grense for antall sideknapper (inkl. første/siste). Komponenten kan vise færre for å tilpasse smale skjermer.
min-visible-pages	number	3	Nedre grense for antall sideknapper når komponenten krymper på smale skjermer.
page-size	number	0	Elementer per side. Sett til 0 for å skjule sidestørrelsesvelger.
page-size-options	string	''	Kommaseparerte alternativer (f.eks. "10,25,50").
size	'sm' | 'md' | 'lg'	'md'	Komponentstørrelse.
nav-label	string	'Sidenavigasjon'	Tilgjengelig etikett for nav-landemerke.
show-jump-to	boolean	false	Vis «hopp til side»-felt under navigasjonen.

Hendelser (Events)

Hendelse	Detail	Beskrivelse
page-change	{ page: number }	Utløses når brukeren navigerer til en ny side.
page-size-change	{ pageSize: number }	Utløses når brukeren endrer sidestørrelse.

CSS Parts

Part	Beskrivelse
nav	<nav>-elementet som omslutter sideknappene.
page-size	Beholderen for sidestørrelsesvelgeren.

Bruk i Angular

<adb-pagination
  [attr.current-page]="currentPage"
  [attr.total-pages]="totalPages"
  (page-change)="onPageChange($event)"
  (page-size-change)="onPageSizeChange($event)"
></adb-pagination>

onPageChange(event: CustomEvent<{ page: number }>) {
  this.currentPage = event.detail.page;
}

onPageSizeChange(event: CustomEvent<{ pageSize: number }>) {
  this.pageSize = event.detail.pageSize;
}

Bruk i React

<adb-pagination
  current-page={currentPage}
  total-pages={totalPages}
  onpage-change={(e) => setCurrentPage(e.detail.page)}
  onpage-size-change={(e) => setPageSize(e.detail.pageSize)}
/>

Universell utforming (WCAG 2.1 AA)

Krav	Implementasjon
1.3.1 Informasjon og relasjoner	<nav> landmark med aria-label
2.1.1 Tastatur	Alle knapper er tastaturnavigérbare (Tab/Enter)
2.4.4 Lenkens formål	aria-label="Side N" på sideknapper, aria-label på forrige/neste
4.1.2 Navn, rolle, verdi	aria-current="page" markerer aktiv side
1.4.3 Kontrast	Bruker tokens som oppfyller 4.5:1 kontrastkrav

Installasjon

npm install @artsdatabanken/components

// Full import
import '@artsdatabanken/components';

// Tree-shakeable import
import '@artsdatabanken/components/pagination';