# Pagination (navegación paginada)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-pagination.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Navegación

Permite recorrer conjuntos extensos manteniendo visible la página actual y los controles anterior y siguiente.

v2.0

1
## 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.

i
## Contexto accesible
Incluye una etiqueta en el elemento `nav` para distinguir la paginación de otras navegaciones.

Código + resultado

## Ejemplo aplicado de Pagination
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<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>
```

Resultado aplicado   Pagination · página actual

Componente real

- ‹
- 1
- 2
- 3
- 4
- ›

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

01
### Nav etiquetado
Usa aria-label para explicar qué colección pagina.

02
### Página actual
Mantén un único aria-current.

03
### Destino real
Cada enlace debe conservar una URL navegable.

04
### Tamaño táctil
Evita controles demasiado pequeños o cercanos.