Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Paginación

Última actualización:

Paginación CSS Tailwind solo CSS para páginas numeradas, flechas anterior/siguiente, espacios de puntos suspensivos, entradas de radio accesibles y selección de salto de página. No se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de paginación permiten a los usuarios navegar entre páginas de contenido: resultados de búsqueda, tablas de datos, archivos de artículos y listados de productos. Creada mediante la composición de los componentes Join y Button, la paginación de Frutjam no requiere JavaScript ni CSS adicional. Admite páginas numeradas, flechas anterior/siguiente, espacios con puntos suspensivos, entradas de radio accesibles y selección de salto de página.

Solo CSS, no se requiere JavaScript: cree una paginación accesible con HTML puro y Tailwind CSS. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React, Next.js y cualquier pila.

Clase Tipo Descripción
joinBaseAgrupa botones en una franja de paginación conectada
join-itemModificadorCada botón de página o entrada dentro de la unión
btn-activeStateResalta la página actual
btn-disabledStatePuntos suspensivos no interactivos o página no disponible

Paginación básica

Una tira de páginas numerada con una página activa. Aplique btn-active para resaltar la página actual. Utilice etiquetas de anclaje en lugar de botones para enlaces de páginas renderizadas por el servidor.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
  <button class="join-item btn">4</button>
  <button class="join-item btn">5</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn btn-active">2</button>
  <button className="join-item btn">3</button>
  <button className="join-item btn">4</button>
  <button className="join-item btn">5</button>
</div>

Tallas

La paginación hereda todos los tamaños de botones. Utilice btn-xs o btn-sm para tablas compactas y btn-lg para interfaces táctiles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-col gap-3 items-start">
  <div class="join">
    <button class="join-item btn btn-xs">1</button>
    <button class="join-item btn btn-xs btn-active">2</button>
    <button class="join-item btn btn-xs">3</button>
    <button class="join-item btn btn-xs">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-sm">1</button>
    <button class="join-item btn btn-sm btn-active">2</button>
    <button class="join-item btn btn-sm">3</button>
    <button class="join-item btn btn-sm">4</button>
  </div>
  <div class="join">
    <button class="join-item btn">1</button>
    <button class="join-item btn btn-active">2</button>
    <button class="join-item btn">3</button>
    <button class="join-item btn">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-lg">1</button>
    <button class="join-item btn btn-lg btn-active">2</button>
    <button class="join-item btn btn-lg">3</button>
    <button class="join-item btn btn-lg">4</button>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className="flex flex-col gap-3 items-start">
  <div className="join">
    <button className="join-item btn btn-xs">1</button>
    <button className="join-item btn btn-xs btn-active">2</button>
    <button className="join-item btn btn-xs">3</button>
    <button className="join-item btn btn-xs">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-sm">1</button>
    <button className="join-item btn btn-sm btn-active">2</button>
    <button className="join-item btn btn-sm">3</button>
    <button className="join-item btn btn-sm">4</button>
  </div>
  <div className="join">
    <button className="join-item btn">1</button>
    <button className="join-item btn btn-active">2</button>
    <button className="join-item btn">3</button>
    <button className="join-item btn">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-lg">1</button>
    <button className="join-item btn btn-lg btn-active">2</button>
    <button className="join-item btn btn-lg">3</button>
    <button className="join-item btn btn-lg">4</button>
  </div>
</div>

Con puntos suspensivos

Utilice btn-disabled para el espacio de puntos suspensivos entre una gran variedad de páginas. Los lectores de pantalla omiten los botones deshabilitados, así que emparéjelos con aria-hidden="true" en los puntos suspensivos.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn">2</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn btn-active">12</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn">99</button>
  <button class="join-item btn">100</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn">2</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn btn-active">12</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn">99</button>
  <button className="join-item btn">100</button>
</div>

Navegación anterior/siguiente

La paginación basada en flechas es el patrón más común para blogs, listados de productos y cualquier feed paginado donde no sea práctico mostrar los números de página exactos.

Con iconos de flecha

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button class="join-item btn">Page 12</button>
  <button class="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button className="join-item btn">Page 12</button>
  <button className="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

Anterior/Siguiente de igual ancho

Utilice un contenedor grid grid-cols-2 en el contenedor de unión para darle a ambos botones el mismo ancho, ideal para diseños orientados a dispositivos móviles y barras de paginación de ancho completo.

1
2
3
4
<div class="join grid grid-cols-2 w-72">
  <button class="join-item btn btn-outline">← Previous</button>
  <button class="join-item btn btn-outline">Next →</button>
</div>

1
2
3
4
<div className="join grid grid-cols-2 w-72">
  <button className="join-item btn btn-outline">← Previous</button>
  <button className="join-item btn btn-outline">Next →</button>
</div>

Con primero/último

Agregue botones de doble flecha para permitir a los usuarios saltar directamente a la primera o última página. Útil para tablas de datos con cientos de páginas.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-sm">4</button>
  <button class="join-item btn btn-sm btn-active">5</button>
  <button class="join-item btn btn-sm">6</button>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
  <button class="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-sm">4</button>
  <button className="join-item btn btn-sm btn-active">5</button>
  <button className="join-item btn btn-sm">6</button>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
  <button className="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

Paginación de radio accesible

Utilice entradas type="radio" como elementos de unión para una selección de páginas totalmente navegables mediante teclado y solo CSS sin JavaScript. Cada entrada actúa como un botón que se puede presionar mientras mantiene el estado seleccionado en su forma nativa.

1
2
3
4
5
6
7
<div class="join">
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="2" checked />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

1
2
3
4
5
6
7
<div className="join">
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="2" defaultChecked />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

Paginación con salto de página

Combine unirse, botones y una selección para obtener una barra de paginación compacta que permite a los usuarios ir directamente a cualquier página, algo común en paneles de administración, interfaces CMS y aplicaciones con gran cantidad de datos. No se requiere JavaScript para la selección en sí; emparéjelo con HTMX o envíe un formulario para la navegación del lado del servidor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="join">
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select class="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option selected>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div className="join">
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select className="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

Estilo de esquema

Utilice btn-outline en todos los botones para obtener un peso visual más ligero que se adapte a las secciones de contenido secundario y a las barras laterales.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-outline btn-sm">1</button>
  <button class="join-item btn btn-outline btn-sm btn-active">2</button>
  <button class="join-item btn btn-outline btn-sm">3</button>
  <button class="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-outline btn-sm">1</button>
  <button className="join-item btn btn-outline btn-sm btn-active">2</button>
  <button className="join-item btn btn-outline btn-sm">3</button>
  <button className="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Paginación según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP