Reddot UI Library

Docs
Pagination

Pagination

Pagination with page navigation, next and previous links.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/pagination.json

Utilisation

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
 
export function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Intégration Next.js

Pour Next.js, mettez à jour le fichier pagination.tsx pour utiliser le composant Link :

import Link from "next/link"
 
type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

Note : La CLI sera mise à jour pour gérer automatiquement cette configuration.

API Reference

Pagination

Le conteneur principal du composant de pagination.

PaginationContent

Contient tous les éléments de pagination.

PaginationItem

Un élément de pagination individuel.

PaginationLink

Un lien de pagination.

PropTypeDefaultDescription
isActivebooleanfalseIndique si le lien est actuel/actif.
size"default" | "sm" | "lg""default"La taille du lien.

PaginationPrevious

Lien vers la page précédente.

PropTypeDefaultDescription
hrefstring-L'URL vers laquelle naviguer.

PaginationNext

Lien vers la page suivante.

PropTypeDefaultDescription
hrefstring-L'URL vers laquelle naviguer.

PaginationEllipsis

Affiche des points de suspension pour indiquer des pages omises.