Pagination
Controles de navigation de pages avec liens precedent, suivant et de page. Installez Pagination depuis le registre VLLNT UI avec la CLI shadcn.
Controles de navigation de pages avec liens precedent, suivant et de page. Fait partie de la famille navigation dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Pagination a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/pagination.jsonSource
import Link from "next/link";
import { Button } from "../button/button";
export type PaginationProps = {
baseUrl: string;
className?: string;
currentPage: number;
totalPages: number;
};
export function Pagination({
baseUrl,
className,
currentPage,
totalPages,
}: PaginationProps) {
if (totalPages <= 1) return null;
const maxVisiblePages = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
if (endPage - startPage + 1 < maxVisiblePages) {
startPage = Math.max(1, endPage - maxVisiblePages + 1);
}
// Previous button
const previousButton =
currentPage > 1 ? (
<Link href={`${baseUrl}?page=${currentPage - 1}`} key="prev">
<Button size="sm" variant="outline">
<span className="text-sm">‹</span>
<span className="sr-only">Previous</span>
</Button>
</Link>
) : null;
// Page numbers
const pageNumbers = Array.from(
{ length: endPage - startPage + 1 },
(_, index) => {
const pageNumber = startPage + index;
return (
<Link href={`${baseUrl}?page=${pageNumber}`} key={pageNumber}>
<Button
size="sm"
variant={pageNumber === currentPage ? "default" : "outline"}
>
{pageNumber}
</Button>
</Link>
);
},
);
// Next button
const nextButton =
currentPage < totalPages ? (
<Link href={`${baseUrl}?page=${currentPage + 1}`} key="next">
<Button size="sm" variant="outline">
<span className="sr-only">Next</span>
<span className="text-sm">›</span>
</Button>
</Link>
) : null;
const pages = [previousButton, ...pageNumbers, nextButton].filter(Boolean);
return (
<div className={`flex items-center justify-center gap-2 ${className}`}>
{pages}
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.