# Pagination

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

## Playground

```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

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

## Faire et ne pas faire

Do

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

Don’t

Flèches uniquement, aucun nombre, aucun total.

## Accessibilité

-   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.
