Composant · Navigation

Pagination

Stable

Navigation de pages numérotées avec contrôles Précédent / Suivant. La page courante est mise en valeur et annoncée ; idéale pour un faible nombre de pages.

Voir le code (Svelte)

<Pagination page={3} pageCount={12} />

Quand l'utiliser

Parcourir un jeu de résultats découpé en pages de taille fixe.
Quand le nombre total de pages est petit (toutes les pages sont rendues).
Pour de grands volumes avec ellipses, utilisez PaginationNav.

Exemple interactif

onpagechange remonte la page demandée ; le parent contrôle l'état.

Voir le code (Svelte)

<Pagination page={3} pageCount={6} previousLabel="Précédent" nextLabel="Suivant" />

États

Sur la première page, « Précédent » est désactivé ; sur la dernière, « Suivant ».

Première page (Précédent désactivé)

Voir le code (Svelte)

<h3>Première page (Précédent désactivé)</h3>
<Pagination page={1} pageCount={4} previousLabel="Précédent" nextLabel="Suivant" />

Anatomie

Conteneur : <nav aria-label="Pagination"> contenant des boutons.
Bouton Précédent : désactivé sur la première page.
Boutons de page : un par page ; la courante est mise en évidence.
Bouton Suivant : désactivé sur la dernière page.

Accessibilité

Le <nav> porte aria-label="Pagination".
Chaque bouton de page a un aria-label « Page N » ; la courante reçoit aria-current="page".
Les contrôles aux extrémités sont disabled, donc retirés du focus.

Lignes directrices

À faire

Traduire previousLabel / nextLabel selon la langue.
Garder la page courante toujours visible et distincte.

À éviter

Rendre des dizaines de pages : passez à PaginationNav.
Oublier de mettre à jour page après onpagechange.

API

Prop	Type	Défaut	Description
`page`	`number`	requis	Page courante (1-indexée).
`pageCount`	`number`	requis	Nombre total de pages.
`previousLabel`	`string`	`"Previous"`	Libellé du bouton précédent.
`nextLabel`	`string`	`"Next"`	Libellé du bouton suivant.
`onpagechange`	`(page: number) => void`	optionnel	Appelé avec la page demandée.
`class`	`string`	optionnel	Classe(s) supplémentaire(s).
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <nav>.

Tokens utilisés

--st-component-pagination-background
--st-component-pagination-border
--st-component-pagination-text
--st-component-pagination-activeBackground
--st-component-pagination-activeText
--st-component-pagination-disabledText
--st-component-pagination-radius
--st-component-control-hoverBorder
--st-component-control-hoverBackground