Moodinary/UI

Pagination

Listas largas con total conocido (pulsos, comentarios). Para feeds, “Cargar más”.

Pagination es Anterior y Siguiente con resumen. PaginationPages suma números de página cuando conviene saltar.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/pagination-pages.json
import
import { Pagination } from "@moodinary/ui/components/pagination";
import { PaginationPages } from "@moodinary/ui/components/pagination-pages";

Ejemplos

Anterior y Siguiente

La que usa la lista de Pulsos: resumen a la izquierda (página y total), tamaño de página y Anterior/Siguiente. Pensada para paginar por cursor.

Código
cursor.tsx
import { Pagination } from "@moodinary/ui/components/pagination";
import { useState } from "react";

const options = [10, 25, 50, 100] as const;

export default function PaginationCursor() {
	const [page, setPage] = useState(2);
	const [perPage, setPerPage] = useState(25);
	const total = 112;
	const pageCount = Math.ceil(total / perPage);
	return (
		<Pagination
			className="w-full"
			hasNext={page < pageCount}
			hasPrev={page > 1}
			onNext={() => setPage(page + 1)}
			onPrev={() => setPage(page - 1)}
			perPage={{
				onChange: (value) => {
					setPerPage(value);
					setPage(1);
				},
				options,
				value: perPage,
			}}
			summary={
				<span className="tabular-nums">
					Página {page} de {pageCount} · {total} pulsos
				</span>
			}
		/>
	);
}

Con números (fuera del panel)

Muestra primera, última y vecinas de la actual, con puntos suspensivos.

Código
numbered.tsx
import { PaginationPages } from "@moodinary/ui/components/pagination-pages";

export default function PaginationNumbered() {
	return <PaginationPages defaultPage={3} pageCount={12} />;
}

Extremos

En la primera página Anterior queda deshabilitado; en la última, Siguiente.

Primera página

Última página

Código
boundaries.tsx
import { PaginationPages } from "@moodinary/ui/components/pagination-pages";

export default function PaginationBoundaries() {
	return (
		<div className="grid gap-4">
			<div>
				<p className="mb-2 text-ink-3 text-xs">Primera página</p>
				<PaginationPages defaultPage={1} pageCount={12} />
			</div>
			<div>
				<p className="mb-2 text-ink-3 text-xs">Última página</p>
				<PaginationPages defaultPage={12} pageCount={12} />
			</div>
		</div>
	);
}

Props

PaginationPages

PropTipoDefaultDescripción
pageCountnumber-Cantidad de páginas.
pagenumber-Página controlada, desde 1.
defaultPagenumber1Página inicial.
onPageChange(page: number) => void-Se llama al cambiar.
classNamestring-Clases extra.

Pagination

PropTipoDefaultDescripción
hasPrevboolean-Habilita Anterior.
hasNextboolean-Habilita Siguiente.
onPrev() => void-Página anterior.
onNext() => void-Página siguiente.
summaryReactNode-Texto como 1 a 10 de 42.
perPage{ options, value, onChange }-Agrega un selector de tamaño de página.

Cuándo sí y cuándo no

Hacé
  • Mostrá el resumen de resultados.
  • Usá números solo con muchas páginas.
  • Mantené la paginación al pie de la tabla.
Evitá
  • No pagines listas de menos de 10 items.
  • No ocultes Anterior y Siguiente.
  • No cambies el tamaño de página sin avisar.

Accesibilidad

  • La página actual lleva aria-current="page".
  • El cambio de página se anuncia en una región live.