Pagination

Divise une longue liste en pages et permet de naviguer entre elles, indiquant où se trouve la personne et combien reste.

Sur cette page

Playground

Page actuelle

Par page

Fond

HTML

<nav class="feitio-pagination" aria-label="Pages des rendez-vous"><ul><li><span aria-current="page">1</span></li><li><a href="#playground-2" aria-label="Page 2">2</a></li><li><span class="gap" aria-hidden="true">…</span></li><li><a href="#playground-7" aria-label="Page 7">7</a></li><li><a class="step" href="#playground-2" rel="next">Suivante<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></a></li></ul><div class="meta"><p class="count">Affichage 1–20 / 132</p></div></nav>

Quand l'utiliser

Lorsqu'un tableau ou une liste dépasse environ 25 à 50 lignes.

Quand ne pas l'utiliser

Peu de lignes : affiche-les toutes.
Défilement infini : non. Il cache le pied de page, ne permet pas de revenir au même endroit et confond les lecteurs d'écran.

Exemples

Pages et par page

Précédent et Suivant en mots, la page actuelle marquée par la ligne d'encre, le comptage et, optionnellement, le nombre d'éléments par page.

Afficher le code

HTML

<nav class="feitio-pagination" aria-label="Páginas de agendamentos">
  <ul>
    <li><a class="step prev" href="?pagina=2" rel="prev">…Anterior</a></li>
    <li><span aria-current="page">3</span></li>
    <li><a class="step" href="?pagina=4" rel="next">Próxima…</a></li>
  </ul>
  <div class="meta">
    <p class="count">Mostrando 41 a 60 de 132 agendamentos</p>
    <div class="per-page" role="group" aria-label="Por página">…</div>
  </div>
</nav>

Variations

Première et dernière page : un lien qui mène nulle part disparaît ; il n'est pas désactivé.
Beaucoup de pages : la première, la dernière et les voisins de la page actuelle, avec des points de suspension entre eux.
Lorsque la taille change : la nouvelle page commence au premier élément que la personne voyait.
Tout tient sur une seule page : le composant entier disparaît ; si seuls les nombres restent, "Par page" demeure.

Anatomie

Précédent et Suivant : mot avec la flèche ; ils disparaissent sur la première et dernière page.
Page actuelle : la ligne d'encre, sans lien.
Suivant, toujours à la fin de la ligne.
Compte : où se trouve la personne et le total.
Par page, optionnel.

Faire et ne pas faire

Dit où se trouve la personne et combien il reste.

Don’t

Flèches uniquement, aucun nombre, aucun total.

Un <nav> nommé ; la page actuelle avec aria-current="page" et sans lien.
Chaque numéro avec son nom complet pour les lecteurs d'écran (« Page 4 »).
Ciblage de 40px, même sur les numéros.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-pagination"`	sur l'élément `<nav>`	Les liens dans une ligne, et en dessous, le comptage et la taille.
`aria-current="page"`	sur la page actuelle	Ligne d'encre, pas de lien.
`class="step"`, `"step prev"`	Suivant et Précédent	Mot avec la flèche.
`rel`	`"prev"`, `"next"`	Taille le navigateur sur quelle page est précédente et suivante.
`class="per-page"`	optionnel	Les tailles de pages, comme des liens.