Navigation

Pagination

ترقيم الصفحاتPagination

Stablesrc/dsm/components/pagination.tsx
La pagination découpe une longue liste de résultats en pages. Elle accepte soit un gabarit d'URL (`hrefFor`, pour rester utilisable depuis un composant serveur), soit un rappel `onPageChange` côté client.

Import

import { Pagination } from "@/dsm/components/pagination";

Exemples

Pagination par défaut

Beaucoup de pages : les puces intermédiaires laissent place à des points de suspension.

LTR

Peu de pages

Sous le seuil de regroupement, toutes les pages restent visibles.

LTR

Variante compacte

« Page X sur Y » avec seulement précédent/suivant, pour un espace étroit.

LTR

Résultats de recherche

Pagination pilotée côté client (`onPageChange`) au-dessus d'une liste de démarches.

LTR

42 démarches trouvées pour « identité »

  • Renouveler ma Carte Nationale d'Identité Électronique
  • Demander un passeport biométrique
  • Immatriculer un véhicule neuf
  • Adhérer à l'Assurance Maladie Obligatoire
  • Demander un extrait d'acte de naissance

Usage

Quand l'utiliser

  • Utilisez la pagination pour une liste de résultats trop longue pour tenir sur une seule page (recherche, annuaire, actualités).
  • Préférez la variante `compact` dans un espace étroit (barre latérale, fiche mobile) où seuls précédent/suivant sont utiles.
  • Passez `hrefFor="/recherche?page={page}"` quand chaque page correspond à une URL réelle, pour un rendu depuis une page serveur.

Quand ne pas l'utiliser

  • N'utilisez pas la pagination pour moins d'une dizaine de résultats : le composant se masque de lui-même si `pageCount` vaut 1.
  • Ne combinez pas `hrefFor` et `onPageChange` sans raison : le premier prime dès qu'un bouton n'est pas désactivé.

Accessibilité & langues

Accessibilité

  • Le conteneur est un `nav` avec `aria-label` traduit (« Pagination »).
  • La page courante est un élément non interactif portant `aria-current="page"` et un texte masqué (« Page actuelle »).
  • Les boutons première/précédente/suivante/dernière portent chacun un `aria-label` explicite ; les puces numérotées portent « Aller à la page N ».

RTL & multilingue

  • Les chevrons (`ChevronBack`/`ChevronForward`) se retournent automatiquement : « précédent » reste toujours du côté du début de la ligne de lecture.
  • Les doubles chevrons de première/dernière page suivent la même logique de retournement.

Propriétés

Pagination
PropriétéTypeDéfautDescription
page*number—Numéro de la page courante (base 1).
pageCount*number—Nombre total de pages.
hrefForstring—Gabarit d'URL contenant le jeton littéral « {page} », p. ex. `/recherche?page={page}`. Une chaîne, pas une fonction : utilisable depuis un composant serveur.
onPageChange(page: number) => void—Rappel côté client, utilisé quand `hrefFor` est absent.
siblingCountnumber1Nombre de pages voisines affichées de part et d'autre de la page courante.
variant"default" | "compact"defaultLa variante compacte n'affiche que « Page X sur Y » avec précédent/suivant.
classNamestring—Classes Tailwind supplémentaires.

Composants liés