Pagination

href est une fonction qui va du numéro de page à l’URL : la pagination marche donc aussi bien pour /blog/2 que pour /blog?page=2. Chaque page devient ainsi un vrai lien — explorable, ouvrable dans un nouvel onglet, et fonctionnel sans JavaScript, ce que veut un site statique.

Pagination de base

pagination({ page: 1, count: 5, href: (page) => '#page-' + page })

Fenêtrage

La première et la dernière page sont toujours affichées, plus une fenêtre autour de la page courante, avec des points de suspension partout où la suite fait un saut.

stack({ gap: 'md' },
  pagination({ page: 1, count: 12, href: (page) => '#a-' + page }),
  pagination({ page: 6, count: 12, href: (page) => '#b-' + page }),
  pagination({ page: 12, count: 12, href: (page) => '#c-' + page }),
)

Voisines

siblings est le nombre de pages placées de chaque côté de la page courante.

stack({ gap: 'md' },
  pagination({ page: 6, count: 12, siblings: 0, href: (page) => '#d-' + page }),
  pagination({ page: 6, count: 12, siblings: 1, href: (page) => '#e-' + page }),
  pagination({ page: 6, count: 12, siblings: 3, href: (page) => '#f-' + page }),
)

Extrémités

Précédent est désactivé sur la première page et suivant sur la dernière, si bien que le contrôle ne propose jamais une page qui n’existe pas.

stack({ gap: 'md' },
  pagination({ page: 1, count: 3, href: (page) => '#g-' + page }),
  pagination({ page: 3, count: 3, href: (page) => '#h-' + page }),
  pagination({ page: 1, count: 1, href: (page) => '#i-' + page }),
)

Couleurs et libellés

stack({ gap: 'md' },
  pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
  pagination({
    page: 3,
    count: 6,
    color: 'success',
    previousLabel: 'Plus récents',
    nextLabel: 'Plus anciens',
    href: (page) => '#k-' + page,
  }),
)

Sans href

Sans href, les numéros sont rendus en boutons portant data-su-page — pour une page qui filtre sur place avec son propre script. Préférez les liens quand vous le pouvez : ils survivent à un JavaScript désactivé.

pagination({ page: 2, count: 4 })

Dans un blog

La forme habituelle sur un site statique : generateStaticParams produit une page par tranche, et href pointe vers elles.

Affichage de 21–30 sur 47

return (() => {
  const posts = 47
  const perPage = 10
  const current = 3

  return stack({ gap: 'md', align: 'center' },
    text({ variant: 'small', tone: 'muted' },
      'Affichage de ' + ((current - 1) * perPage + 1) + '–' + Math.min(current * perPage, posts) + ' sur ' + posts,
    ),
    pagination({
      page: current,
      count: Math.ceil(posts / perPage),
      href: (page) => page === 1 ? '#blog' : '#blog-' + page,
    }),
  )
})()

Props

Prop	Type	Défaut	Description
`page`	`number`	`1`	La page courante. Ramenée dans l’intervalle.
`count`	`number`	`1`	Le nombre de pages.
`href`	`(page: number) => string`	—	Du numéro de page à l’URL. Sans lui, les pages sont des boutons.
`siblings`	`number`	`1`	Pages affichées de chaque côté de la page courante.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Couleur de la page courante.
`label`	`string`	`'Pagination'`	Nom accessible du repère nav.
`previousLabel`	`Child`	`'‹'`	Contenu du contrôle précédent.
`nextLabel`	`Child`	`'›'`	Contenu du contrôle suivant.