Pagination

Divide una lista larga en páginas y navega entre ellas, indicando dónde está la persona y cuánto queda.

En esta página

Playground

Página actual

Por página

Fondo

HTML

<nav class="feitio-pagination" aria-label="Páginas de citas"><ul><li><span aria-current="page">1</span></li><li><a href="#playground-2" aria-label="Página 2">2</a></li><li><span class="gap" aria-hidden="true">…</span></li><li><a href="#playground-7" aria-label="Página 7">7</a></li><li><a class="step" href="#playground-2" rel="next">Siguiente<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">Mostrando 1–20 / 132</p></div></nav>

Cuándo usarlo

Cuando una tabla o lista supera aproximadamente 25 a 50 filas.

Cuándo no usarlo

Pocas filas: muéstraselas todas.
Herramienta de desplazamiento infinito: no. Oculta el pie de página, impide volver al mismo lugar y confunde a los lectores de pantalla.

Ejemplos

Páginas y por página

Anterior y Siguiente en palabras, la página actual marcada con la línea de tinta, el conteo y, opcionalmente, cuántos elementos por página.

Mostrar código

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>

Variaciones

Primera y última página: un enlace que no lleva a ningún lado desaparece; no está deshabilitado.
Muchas páginas: la primera, la última y los vecinos de la actual, con puntos suspensivos en medio.
Cuando cambia el tamaño: la nueva página comienza en el primer elemento que la persona estaba viendo.
Todo cabe en una página: el componente completo desaparece; si solo van los números, "Por página" permanece.

Anatomía

Anterior y Siguiente: palabra con la flecha; desaparecen en la primera y última página.
Página actual: la línea de tinta, sin enlace.
Siguiente, siempre al final de la línea.
Cantidad: dónde está la persona y el total.
Por página, opcional.

Hacer y no hacer

Dice dónde está la persona y cuánto falta.

Don’t

Solo flechas, sin número, sin total.

Un <nav> con nombre; la página actual con aria-current="page" y sin enlace.
Cada número con su nombre completo para lectores de pantalla ("Página 4").
Objetivos de 40px, incluso en los números.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-pagination"`	en el `<nav>`	Los enlaces en una fila y, debajo, el conteo y el tamaño.
`aria-current="page"`	en la página actual	Línea de tinta, sin enlace.
`class="step"`, `"step prev"`	Siguiente y Anterior	Palabra con la flecha.
`rel`	`"prev"`, `"next"`	Avisa al navegador qué página es anterior y siguiente.
`class="per-page"`	opcional	Los tamaños de página, como enlaces.