Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Componentes · css

    Paginación (pagination)

    Navegación entre páginas de resultados. Cada página es un enlace real; la actual lleva aria-current="page". Los controles de anterior y siguiente que no están disponibles son texto plano con aria-disabled="true", no enlaces.

    CSS: css/components/pagination.css (dentro de ivolt.css).

    Páginas de resultadosfixtures/pagination/basic.htmlAbrir sola — Páginas de resultados
    <section id="top" class="iv-stack iv-u-gap-6">
  <nav class="iv-pagination" aria-label="Pagination">
    <ul class="iv-pagination__list">
      <li><span class="iv-pagination__link" aria-disabled="true">Previous</span></li>
      <li><a class="iv-pagination__link" href="#top" aria-current="page" aria-label="Page 1, current page">1</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 2">2</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 3">3</a></li>
      <li><span class="iv-pagination__ellipsis" aria-hidden="true">…</span></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 24">24</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Next page">Next</a></li>
    </ul>
  </nav>

  <nav class="iv-pagination" aria-label="Pagination, last page">
    <ul class="iv-pagination__list">
      <li><a class="iv-pagination__link" href="#top" aria-label="Previous page">Previous</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 23">23</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-current="page" aria-label="Page 24, current page">24</a></li>
      <li><span class="iv-pagination__link" aria-disabled="true">Next</span></li>
    </ul>
  </nav>

  <p class="iv-u-m-0 iv-u-text-sm">
    Every page link points back to this section: the fixture demonstrates the
    states, not a real archive. A previous or next step with no destination is a
    <code>&lt;span&gt;</code> with <code>aria-disabled="true"</code>, so it is
    neither focusable nor a link to nowhere.
  </p>
</section>

    Marcado

    nav.iv-pagination[aria-label] → ul.iv-pagination__list → li → a.iv-pagination__link. Puntos suspensivos: span.iv-pagination__ellipsis. Las áreas miden al menos 2.5rem.

    Errores frecuentes

    • Botones en vez de enlaces cuando cada página tiene su URL.
    • Anterior y siguiente de solo icono sin nombre accesible.