Composant · Navigation

PaginationNav

Stable

Pagination étendue avec pages numérotées, ellipses et contrôles précédent/suivant, propulsée par les icônes Lucide `ChevronLeft`, `ChevronRight` et `Ellipsis`.

Exemples

Pagination courte

Voir le code (Svelte)

<PaginationNav
  page={1}
  pageCount={5}
  totalPages={5}
  label="Pagination courte"
  previousLabel="Page précédente"
  nextLabel="Page suivante"
/>

Page courante figée : 1 · « Précédent » désactivé à la borne

Pagination longue avec ellipses

Voir le code (Svelte)

<PaginationNav
  page={12}
  pageCount={30}
  totalPages={30}
  label="Pagination longue"
  previousLabel="Page précédente"
  nextLabel="Page suivante"
/>

Page courante figée : 12 · ellipses automatiques aux extrémités

Bornes désactivées

Voir le code (Svelte)

<PaginationNav
  page={1}
  pageCount={3}
  totalPages={3}
  label="Pagination compacte"
  previousLabel="Page précédente"
  nextLabel="Page suivante"
/>

Page courante figée : 1 · « Précédent » désactivé

API

Prop	Type	Default
`page`	`number` (`$bindable`)	`1`
`pageCount`	`number`	requis
`siblings`	`number`	`1`
`label`	`string`	`"Pagination"`
`previousLabel`	`string`	`"Previous page"`
`nextLabel`	`string`	`"Next page"`
`onPageChange`	`(page: number) => void`	optionnel
`class`	`string`	optionnel

Le composant rend une <nav aria-label> contenant une liste <ul> de boutons. La page active reçoit aria-current="page", et les boutons précédent/suivant sont désactivés aux bornes (page === 1 ou page === pageCount). Le nombre de voisins affichés autour de la page courante est contrôlé par siblings ; les ellipses apparaissent automatiquement dès que pageCount dépasse siblings * 2 + 5. Les icônes Lucide utilisées sont ChevronLeft, ChevronRight et Ellipsis. Les autres attributs HTML <nav> sont transmis via spread.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground