Pagination
Paginación
Actualizado el 24/10/2024
La paginación se emplea para dividir contenido entre múltiples páginas o vistas.
<> Código
× Ocultar Código
- HTML
- JS
<nav aria-label="Paginación" class="ulpgcds-pager">
<ul>
<li class="ulpgcds-pager__item ulpgcds-pager__item--prev">
<a class="pagination__link" href="#" title="Ir a la página anterior">
<span class="visually-hidden">Anterior</span>
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 1">
1
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 2">
2
</a>
</li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--is-active">
<a class="pagination__link" href="#" title="Ir a la página 3">
3
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 4">
4
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 5">
5
</a>
</li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--next">
<a class="pagination__link" href="#" title="Ir a la página siguiente">
<span class="visually-hidden">Siguiente</span>
</a>
</li>
</ul>
</nav> Variantes
Con más de 5 páginas
<> Código
× Ocultar Código
- HTML
- JS
<nav aria-label="Paginación" class="ulpgcds-pager">
<ul>
<li class="ulpgcds-pager__item ulpgcds-pager__item--prev ">
<a class="pagination__link" href="#" title="Ir a la página anterior" aria-disabled="true">
<span class="visually-hidden">Anterior</span>
</a>
</li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--is-active">
<a class="pagination__link" href="#" title="Ir a la página 1">
1
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 2">
2
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 3">
3
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 4">
4
</a>
</li>
<li class="ulpgcds-pager__item">
<a class="pagination__link" href="#" title="Ir a la página 5">
5
</a>
</li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--next">
<a class="pagination__link" href="#" title="Ir a la página siguiente">
<span class="visually-hidden">Siguiente</span>
</a>
</li>
</ul>
</nav> Paginación grande
<> Código
× Ocultar Código
- HTML
- JS
<nav aria-label="Paginación" class="ulpgcds-pager">
<ul>
<li class="ulpgcds-pager__item ulpgcds-pager__item--prev"><a class="pagination__link" href="#" title="Ir a la página anterior"><span class="visually-hidden">Anterior</span></a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página de inicio">1</a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--ellipsis" role="presentation">...</li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 12">12</a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--is-active"><a class="pagination__link" href="#" title="Ir a la página 13">13</a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 14">14</a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--ellipsis" role="presentation">...</li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página final">30</a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--next"><a class="pagination__link" href="#" title="Ir a la página siguiente"><span class="visually-hidden">Siguiente</span></a></li>
</ul>
</nav> Variante indicando los resultados y estado de la paginación
<> Código
× Ocultar Código
- HTML
- JS
<nav aria-label="Paginación" class="ulpgcds-pager">
<div class="ulpgcds-pager__results">Mostrando 10 de 100 de un total de 1000 registros</div>
<ul>
<li class="ulpgcds-pager__item ulpgcds-pager__item--prev "><a aria-disabled="true" class="pagination__link" href="#" title="Ir a la página anterior"><span class="visually-hidden">Anterior</span> </a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--is-active"><a class="pagination__link" href="#" title="Ir a la página 1">1 </a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 2">2 </a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 3">3 </a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 4">4 </a></li>
<li class="ulpgcds-pager__item"><a class="pagination__link" href="#" title="Ir a la página 5">5 </a></li>
<li class="ulpgcds-pager__item ulpgcds-pager__item--next"><a class="pagination__link" href="#" title="Ir a la página siguiente"><span class="visually-hidden">Siguiente</span> </a></li>
</ul>
</nav> Uso del componente
La paginación se emplea para distribuir contenido entre múltiples pantallas, permitiendo a los usuarios navegar entre ellas mediante el uso de elementos interactivos.
En el caso de mostrar elementos que ocupen mucho espacio en la pantalla (por ejemplo, resultados de búsqueda con título y descripción) utilice la paginación cuando haya más de 15 elementos mostrados a la vez.
Para elementos pequeños (por ejemplo, datos tabulados), emplee la paginación cuando haya más de 25 elementos mostrados a la vez.
Buenas prácticas:
- La paginación debe estar debajo del listado de elementos.
- El usuario debe poder navegar entre páginas tanto pulsando en el número de la página correspondiente, como con el botón "anterior" o "siguiente" (comúnmente asociados con flechas).
- En la primera y última páginas, el botón "anterior" o "siguiente" correspondiente debería estar deshabilitado.
- Identifique claramente la página en la que se encuentra el usuario.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-pager | Aplica los estilos para el uso de un paginador |
| .ulpgcds-pager__item | Estilos específicos para un elemento del paginador |
| .ulpgcds-pager__item--prev | Modificador para mostrar la paginación de ir a la página anterior |
| .ulpgcds-pager__item--next | Modificador para mostrar la paginación de ir a la página siguiente |
| .ulpgcds-pager__item--is-active | Aplica estilos a la página activa en la navegación |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
Image
Estado del componente
Estable