Pagination

Navigering mellom sider i en lang liste. Hver side er en lenke med sin egen adresse, ikke en knapp: da kan brukeren åpne side tre i ny fane, kopiere adressen, og komme tilbake med tilbakeknappen.

Slik tar du den i bruk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/pagination/pagination.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<nav aria-label="Sidenavigering">
<ul class="fs-pagination">
  <li><a href="#" aria-label="Forrige side">Forrige</a></li>
  <li><a href="#" aria-label="Side 1">1</a></li>
  <li><a href="#" aria-label="Side 2" aria-current="page">2</a></li>
  <li><a href="#" aria-label="Side 3">3</a></li>
  <li><span class="fs-pagination__gap">…</span></li>
  <li><a href="#" aria-label="Side 9">9</a></li>
  <li><a href="#" aria-label="Neste side">Neste</a></li>
</ul>
</nav>

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/pagination.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<nav aria-label="Sidenavigering">
  <ul {...fs.pagination()}>
    <li><a href="?side=1" aria-current="page">1</a></li>
    <li><a href="?side=2">2</a></li>
  </ul>
</nav>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const liste = document.querySelector<HTMLUListElement>("#sider")

fs.setAttributes(liste, fs.pagination())

fs.pagination.gap gir klassen på hoppet i nummerrekken. Se Typesikker bruk.

Et tall alene sier lite når det leses opp midt i en rekke. aria-label="Side 3" gjør lenken forståelig, og aria-current="page" sier hvilken brukeren står på.

Er brukeren på første side, skal «Forrige» ikke være en lenke. Bytt den ut med <span aria-disabled="true"> eller la den være ute.

Klasser du kan style

Klasse	Hva det er
`.fs-pagination`	Listen med sidene. Lenkene og knappene inni styles av komponenten.
`.fs-pagination__gap`	Hoppet i nummerrekken, som «1 2 … 9 10»

Variabel	Standard
`--fs-pagination-gap`	`var(--fs-spacing-1)`
`--fs-pagination-size`	`var(--fs-spacing-10)`
`--fs-pagination-radius`	`var(--fs-spacing-1)`

--fs-pagination-size er minste bredde og høyde på hvert nummer. WCAG 2.2 krever 24 piksler; standarden her er 40, fordi et nummer i en lang rekke er lett å bomme på med finger.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

Si hvor brukeren er, også utenfor selve velgeren: «Viser 21 til 40 av 184 saker» over listen hjelper mer enn tallrekken alene.
Etter at en ny side er lastet, flytt fokus til toppen av listen. Ellers står fokus igjen på et tall som nå betyr noe annet.
Har listen få sider, vis alle. Hoppet med «…» er bare verdt det fra rundt ti sider og oppover.
Er innholdet en strøm uten slutt, er «Vis flere»-knapp ofte bedre enn sidetall. Uendelig rulling uten knapp gjør bunnteksten uoppnåelig.