Pagination

Candidate

Pagination permet de parcourir une collection divisee en pages. Elle reste separee de Table, des listes et des grilles afin d’etre composee avec n’importe quelle vue de donnees.

Preview

States

default affiche la page comme un lien discret.
hover renforce la surface et la bordure.
current utilise la couleur primaire Pixel et aria-current="page".
disabled remplace le lien precedent ou suivant par un element non interactif.
focus-visible utilise le focus ring semantique.
ellipsis condense les intervalles sans devenir interactive.

Astro

---
import Pagination from '../components/ui/Pagination.astro';
---

<Pagination
  currentPage={4}
  totalPages={12}
  hrefPattern="/segments?page={page}"
  label="Pages de segments"
/>

hrefPattern doit contenir {page}. Le composant le remplace par le numero de destination et rend de vrais liens, compatibles avec le rendu serveur et l’ouverture dans un nouvel onglet.

Tokens

--pagination-bg, --pagination-bg-hover, --pagination-bg-current, --pagination-border-*, --pagination-fg-*, --pagination-item-size, --pagination-gap, --pagination-radius, --pagination-focus-ring.

Do / Don’t

Do	Don’t
Placer Pagination apres la collection qu’elle controle.	Integrer la pagination dans le composant Table.
Conserver de vrais liens pour chaque page.	Changer de page avec des `div` cliquables.
Garder la page courante visible.	Afficher tous les numeros d’une longue collection.
Donner un `label` lie au contenu.	Utiliser plusieurs paginations nommees simplement « Pagination ».

Accessibility

Le composant rend un nav nomme. La page courante expose aria-current="page". Les controles precedent et suivant utilisent des icones masquees et un aria-label explicite. Les controles indisponibles ne sont pas rendus comme des liens.

Status

Candidate. La navigation standard est utilisable. Les variantes compactes et la saisie directe d’un numero de page restent hors V1.