Catálogo · Documentación
Navegación entre páginas
Dos bloques de enlaces al final de una página, uno a la página anterior y otro a la siguiente, cada uno con el título de la página a la que lleva.
Encaja mejor en: cualquier sitio — el final de una página que forma parte de una secuencia
Ejemplo
Los dos bloques que enlazan con la página anterior y la siguiente.
Two blocks side by side, Next at the end; stacked at 640px and below. The whole block is the link.
Problemas conocidos
No se conocen.
Código
Copiar el marcado
import "@luz-ds/catalog/components/pager.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">Una lista de uno o dos bloques dentro de una zona de navegación:
<nav aria-label="Previous and next page">
<ul class="luz-pager">
<li class="luz-pager__prev"><a class="luz-pager__link" rel="prev" href="/install/"><span class="luz-pager__label">Previous</span> <span class="luz-pager__title">Install the tool</span></a></li>
<li class="luz-pager__next"><a class="luz-pager__link" rel="next" href="/deploy/"><span class="luz-pager__label">Next</span> <span class="luz-pager__title">Deploy to production</span></a></li>
</ul>
</nav>Variantes y opciones
No hay modificadores. Cada elemento indica en qué lado está.
| Clase | Efecto |
|---|---|
.luz-pager | En un <ul>: dos columnas iguales con separación y sin viñetas. Una columna a 640px o menos |
.luz-pager | En el primer <li>: la primera columna |
.luz-pager | En el segundo <li>: la segunda columna, con el texto al final. Se mantiene ahí cuando no hay una página anterior |
.luz-pager | En el <a>: todo el bloque es un enlace, con borde y relleno. Al pasar el cursor cambian el borde y la superficie, y se subraya el título |
.luz-pager | «Anterior» o «Siguiente», en tamaño pequeño y con el color secundario |
.luz-pager | El título de la página a la que lleva, más grande, en seminegrita y con el color de los enlaces |
Cómo funciona
CSS de components/pager.css de @luz-ds/catalog. Define los bloques; tú decides el orden de las páginas.
- Los dos bloques tienen el mismo tamaño y todo el bloque es el área de activación, así que resulta fácil hacer clic o tocarlo.
- La primera página solo tiene «Siguiente» y la última solo «Anterior»: omite el otro
<li>. Si solo hay «Siguiente», permanece al final de la segunda columna. - Cada enlace tiene
rel="prev"orel="next"y un nombre que empieza por el texto visible: «Anterior: Instalar la herramienta». - El título nunca se acorta: si es largo, se ajusta dentro del bloque.
Sin JavaScript
No cambia nada. Son dos enlaces y el paquete no incluye ningún script.
Teclado y ARIA
- Orden: primero «Anterior» y después «Siguiente», como en el código fuente. Con Tab llegas a cada enlace y con Enter lo abres.
- Nombres: el
<nav>se llama «Página anterior y siguiente». El nombre de cada enlace coincide con su texto visible («Anterior: Instalar la herramienta»), así que quien oiga «pulsa Anterior» podrá encontrarlo (WCAG 2.5.3). No añadas unaria-labelque lo sustituya. - Zona de referencia: usa un único bloque de navegación entre páginas en cada página. Si hay otro
<nav>, necesita un nombre distinto.
La pestaña Diseño incluye Contraste y foco.
Diseño
Cuándo usarlo
Usa la navegación entre páginas al final del contenido para que, al terminar una página, quien lee pueda ir a la siguiente según el orden que hayas elegido.
- Páginas que se leen en orden: una guía, un tutorial, los capítulos de un manual, los pasos de un curso o una serie de entradas. También sirve para cursos, series de entradas y cualquier conjunto ordenado de páginas.
- Después del contenido y antes del pie de página.
Cuándo no usarlo
No uses la navegación entre páginas cuando las páginas no tengan un orden ni para las páginas de una lista de resultados.
- La barra lateral ya incluye todas las páginas. La navegación entre páginas indica el siguiente paso, no muestra todo el mapa.
- Para las páginas de una lista o tabla, usa la paginación, que incluye números de página.
Qué hacer y qué no
Cómo escribir el contenido
- Las etiquetas y los títulos son tu texto, no de LUZ: los ejemplos de esta página son de ejemplo. Escríbelos para tu sitio y en su idioma.
- Etiqueta: «Anterior» y «Siguiente» son una buena opción por defecto. Tradúcelas junto con el resto de la página o usa las palabras de tu sitio, como «Volver» y «Continuar».
- Título: el título exacto de la página de destino, igual que en la barra lateral o que el encabezado de esa página.
- Nombre: «Anterior: » o «Siguiente: » y el título. No añadas flechas ni la palabra «página».
Contraste y foco
Los bloques aparecen sobre la superficie de la página; al pasar el cursor, lo hacen sobre la superficie de interacción.
| Elemento | Color sobre fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Etiqueta | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Título | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Etiqueta al pasar el cursor | --luz-text-secondary on --luz-surface-hover | 5.6:1 | 6.2:1 | 18.4:1 | 4.5:1 |
Título al pasar el cursor | --luz-brand-primary on --luz-surface-hover | 5.1:1 | 6.4:1 | 13.5:1 | 4.5:1 |
Borde al pasar el cursor | --luz-outline on --luz-surface-page | 4.3:1 | 3.6:1 | 21.0:1 | 3:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.
- Foco: cada bloque conserva el anillo de core, de 2 px,
--luz-focus-ring, que se dibuja alrededor de todo el bloque. - Área de activación: cada bloque es un enlace de al menos 24px de alto y ocupa toda su mitad de la fila.
- Bordes: el borde en reposo (
--luz-divider) es decorativo y no tiene un mínimo.
Tokens que usa
Los 10 tokens que leen las reglas de .luz-pager de components/pager.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres; consulta Tokens en Figma.
- Spacing and sizing
--luz-space-3xs,--luz-space-md,--luz-space-sm- Typography
--luz-text-lg,--luz-text-sm- Radius
--luz-radius-md
La pestaña Código incluye Teclado y ARIA.