Componentes · Navegación
Pagination (navegación paginada)
Permite recorrer conjuntos extensos manteniendo visible la página actual y los controles anterior y siguiente.
Estado actual
aria-current identifica la página seleccionada.
Límites claros
Anterior y siguiente admiten estado deshabilitado.
Composición flexible
La lista se adapta y puede envolver cuando falta espacio.
Código + resultado
Ejemplo aplicado de Pagination
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.
<nav aria-label="Páginas de resultados">
<ul class="q-pagination">
<li>
<a class="q-pagination__link rounded-8" href="#" aria-disabled="true">
‹
</a>
</li>
<li>
<a class="q-pagination__link rounded-8" href="#" aria-current="page">
1
</a>
</li>
<li>
<a class="q-pagination__link rounded-8" href="#">
2
</a>
</li>
<li>
<a class="q-pagination__link rounded-8" href="#">
3
</a>
</li>
<li>
<a class="q-pagination__link rounded-8" href="#">
4
</a>
</li>
<li>
<a class="q-pagination__link rounded-8" href="#">
›
</a>
</li>
</ul>
</nav>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-pagination | Lista | Agrupa los controles de página. |
.q-pagination__link | Control | Enlace individual de navegación. |
[aria-current="page"] | Página actual | Marca el destino activo. |
[aria-disabled="true"] | Deshabilitado | Impide una navegación no disponible. |
.bc-{token} | Color de acento | Sincroniza texto, borde y fondo de la página activa. |
.rounded-8 | Radio opcional | Redondea cada enlace de paginación. |
Recomendaciones
Buenas prácticas de Pagination
Nav etiquetado
Usa aria-label para explicar qué colección pagina.
Página actual
Mantén un único aria-current.
Destino real
Cada enlace debe conservar una URL navegable.
Tamaño táctil
Evita controles demasiado pequeños o cercanos.