<lm-pagination> – Paginering / Pagination

Om komponenten

Kanonisk navn

<lm-pagination>

Synonymer

pagination, paginering, page navigation, sidenavigasjon, pager

Kategori

navigasjon

ARIA-mønster

Ikke aktuelt - Pagination har ikke et eget APG-widgetmønster. Komponenten følger i stedet vanlig navigasjonssemantikk med <nav aria-label> og aria-current="page" på den aktive sideknappen.

Parts

nav, list, button, page-number, ellipsis

Native-first-vurdering

For URL-baserte sider er ren <nav> med vanlige lenker fortsatt det riktige, native-first valget. Denne komponenten finnes spesifikt for klientstyrte datasett der UI-et trenger sideknapp-logikk, komprimerte sidetall og et hendelses-API i tillegg til den native knappesemantikken.

Nettleserstøtte

Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er og native knappesemantikk.

Design-tokens

var(--tap-target-min, ...), var(--space-xs, ...), var(--space-small, ...), var(--border-width, ...), var(--border-color, ...), var(--radius-pill, ...), var(--color-surface, ...), var(--color-surface-text, ...), var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--color-accent, ...), var(--transition-duration, ...), var(--transition-easing, ...), var(--opacity-disabled, ...), var(--font-weight-semibold, ...)

Sist endret

20. september 2026

Brukt

1 sted

Formål

Gir et kompakt og tilgjengelig sidevelger-mønster for paginerte datasett, med første/forrige/neste/siste og sidenumre som komprimeres med ellipser når antall sider blir stort. Komponenten er laget for klientstyrte lister og tabeller der vanlige lenker ikke er nok alene.

Egner seg for

• Klientstyrte tabeller, kortlister og søkeresultater der UI-et må kunne bytte side uten full sidelast.
• Datasett med mange sider der du vil holde kontrollen konsistent uten å kode sideknapp-logikken på nytt for hvert prosjekt.

Egner seg ikke for

• Vanlig dokument- eller side-navigasjon med ekte URL-er - bruk en enkel <nav> med <a href>-lenker direkte i markupen.
• Uendelig rulling eller "last mer"-mønstre der brukeren ikke tenker i sidetall.

Bruk

Komponenten er ment for klientstyrt paging. Lytt på pagination:endret, last eller filtrer riktig side, og la komponenten selv holde rede på aktiv side gjennom current-attributtet.

<script type="module" src="/designsystem/komponenter/navigasjon/pagination/pagination.js"></script>

<lm-pagination current="3" total="18" label="Sider i transaksjonslisten"></lm-pagination>

const pagination = document.querySelector("lm-pagination");

pagination.addEventListener("pagination:endret", (event) => {
    renderSide(event.detail.page);
});

pagination.setPage(4);

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-pagination::part(nav) {
    /* egne stiler for "Den omsluttende navigasjonsregionen." */
}

lm-pagination::part(list) {
    /* egne stiler for "Beholderen som holder alle kontrollene og ellipsene." */
}

lm-pagination::part(button) {
    /* egne stiler for "Felles part for alle knappene i pagination-kontrollen." */
}

lm-pagination::part(page-number) {
    /* egne stiler for "Part lagt til på de numeriske sideknappene." */
}

lm-pagination::part(ellipsis) {
    /* egne stiler for "Ellipsen som markerer skjulte sider mellom de viste sidenumrene." */
}

Metoder

Tilgjengelighet

Komponenten bruker en ekte <nav>-region med aria-label, native <button>-kontroller og aria-current="page" på den aktive siden. Siden knappene er native, får tastaturbrukeren vanlig Tab-navigasjon uten egen ARIA-rovinglogikk. Disabled-tilstand brukes bare på første/forrige og neste/siste når brukeren allerede står ytterst i området.

• Den omsluttende regionen er en ekte <nav> med aria-label, slik at skjermlesere kan hoppe direkte til sidenavigasjonen.
• Aktiv side får aria-current="page", som er den etablerte måten å markere dagens side i navigasjon på.
• Knappene er native og krever derfor ingen ekstra tastaturhåndtering utover det nettleseren allerede gir.

Detaljer

• Komponenten skjuler seg selv når total er 1 eller lavere, slik at konsumenten slipper å huske den regelen hver gang.
• window-size styrer hvor mange sidenumre som holdes synlige før ellipsene tar over, men første og siste side vises alltid.

Referanser

Se også:

• ../../innhold/data-table/index.html - er et typisk sted å koble inn klientstyrt paginering når et datasett blir for langt til å vises på én gang.
• ../breadcrumb/index.html - brukes for stedlig navigasjon i informasjonsarkitektur, ikke for å bla mellom nummererte sider i et datasett.

Brukes av:

• Ingen ennå - ny komponent.

Avhengigheter: Ingen