Pagination

Navigation entre pages de résultats. Les liens précédent/suivant en bordure de liste utilisent aria-disabled="true" plutôt que d’être supprimés, pour garder une structure de liste stable.

Do / Don’t

✓ Faire

Utiliser des liens réels (<a href>) pour que la pagination fonctionne sans JavaScript
Tronquer avec une ellipse au-delà de 5-7 pages visibles

✗ Éviter

Afficher toutes les pages d’une liste de 50+ résultats sans ellipse
Rendre précédent/suivant invisibles (display: none) en bordure de liste plutôt que désactivés

Structure : <nav aria-label="Pagination"> > <ul class="tds-pagination__list"> d’items tds-pagination__link, page courante marquée aria-current="page", bornes désactivées via aria-disabled="true", troncature via tds-pagination__ellipsis.

Importation

@import "@tds-tchad/core/components/pagination/pagination.css";

import { pagination } from '@tds-tchad/core/components/pagination';

Exemple

<nav aria-label="Pagination">
  <ul class="tds-pagination__list">
    <li>
      <a href="?page=1" class="tds-pagination__link" aria-disabled="true" aria-label="Page précédente">‹</a>
    </li>
    <li><a href="?page=1" class="tds-pagination__link" aria-current="page" aria-label="Page 1">1</a></li>
    <li><a href="?page=2" class="tds-pagination__link" aria-label="Page 2">2</a></li>
    <li><a href="?page=3" class="tds-pagination__link" aria-label="Page 3">3</a></li>
    <li><span class="tds-pagination__ellipsis">…</span></li>
    <li><a href="?page=12" class="tds-pagination__link" aria-label="Page 12">12</a></li>
    <li>
      <a href="?page=2" class="tds-pagination__link" aria-label="Page suivante">›</a>
    </li>
  </ul>
</nav>