72Commencer
HextaUI

Pagination

Une navigation par pages qui garde chaque bouton en place, glisse vers la page courante et permet d’accéder à n’importe quelle page depuis les points de suspension.

Showing 1–10 of 248 results

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

const perPage = 10
const total = 248

export function PaginationDemo() {
  const [page, setPage] = React.useState(1)
  const first = (page - 1) * perPage + 1
  const last = Math.min(page * perPage, total)

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination
        page={page}
        count={Math.ceil(total / perPage)}
        onPageChange={setPage}
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        Showing {first}–{last} of {total} results
      </p>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination.json

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Utilisation

import { Pagination } from "@/components/ui/pagination"
const [page, setPage] = React.useState(1)

<Pagination page={page} count={25} onPageChange={setPage} />

Donnez un count à Pagination et elle construit toute la barre. Elle affiche toujours le même nombre d'emplacements, si bien que Précédent, Suivant et les numéros ne bougent jamais sous votre curseur quand vous parcourez les pages. Omettez count pour composer vous-même les parties.

Composition

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Exemples

Aller à une page

Cliquez sur des points de suspension pour saisir un numéro de page. Enter saute à la page, un nombre hors plage fait trembler le champ, et Esc remet les points de suspension. Désactivez-le avec jump={false}.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLong() {
  const [page, setPage] = React.useState(480)

  return <Pagination page={page} count={1000} onPageChange={setPage} />
}

Compact

Quand la barre ne tient pas dans son conteneur, elle passe à Précédent, « Page 4 sur 24 » et Suivant, et revient quand la place le permet. Le label est aussi un champ de saut. Forcez l'une ou l'autre disposition avec compact.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationCompact() {
  const [page, setPage] = React.useState(4)

  return (
    <div className="w-full max-w-72 rounded-xl border p-2">
      <Pagination page={page} count={24} onPageChange={setPage} />
    </div>
  )
}

Liens

Avec getPageHref, chaque page est un vrai lien, qui peut donc s'ouvrir dans un nouvel onglet. Un simple clic appelle toujours onPageChange.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLinks() {
  const [page, setPage] = React.useState(3)

  return (
    <Pagination
      page={page}
      count={12}
      getPageHref={(target) => `#page-${target}`}
      onPageChange={setPage}
    />
  )
}

Composable

Sans count, construisez la barre à partir des parties, comme dans shadcn/ui. Passez render pour utiliser le lien de votre routeur.

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

const pages = [1, 2, 3]

export function PaginationComposable() {
  const [page, setPage] = React.useState(2)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            render={<button type="button" />}
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>
        {pages.map((item) => (
          <PaginationItem key={item}>
            <PaginationLink
              render={<button type="button" />}
              isActive={item === page}
              onClick={() => setPage(item)}
            >
              {item}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            render={<button type="button" />}
            disabled={page === pages.length}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

De droite à gauche

usePagination renvoie les éléments de page et de points de suspension pour des mises en page personnalisées. Les chevrons s'inversent dans le texte de droite à gauche.

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  usePagination,
} from "@/components/ui/pagination"

export function PaginationRtl() {
  const [page, setPage] = React.useState(2)
  const { items, hasPrevious, hasNext } = usePagination({ page, count: 3 })

  return (
    <div dir="rtl">
      <Pagination aria-label="التنقل بين الصفحات">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              text="السابق"
              aria-label="الصفحة السابقة"
              render={<button type="button" />}
              disabled={!hasPrevious}
              onClick={() => setPage(page - 1)}
            />
          </PaginationItem>
          {items.map((item) =>
            item.type === "page" ? (
              <PaginationItem key={item.page}>
                <PaginationLink
                  render={<button type="button" />}
                  isActive={item.page === page}
                  onClick={() => setPage(item.page)}
                >
                  {item.page.toLocaleString("ar-EG")}
                </PaginationLink>
              </PaginationItem>
            ) : null
          )}
          <PaginationItem>
            <PaginationNext
              text="التالي"
              aria-label="الصفحة التالية"
              render={<button type="button" />}
              disabled={!hasNext}
              onClick={() => setPage(page + 1)}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

Clavier

ToucheAction
TabEntre dans la barre et en sort. Précédent et Suivant restent focalisables aux extrémités.
←→Se déplace entre Précédent, les pages et Suivant. S'inverse dans les mises en page de droite à gauche.
HomeEndVa au premier ou au dernier élément.
EnterOuvre la page ou le champ de page qui a le focus. Dans le champ, saute à cette page et lui donne le focus.
EscFerme le champ de page et rend le focus aux points de suspension.

Accessibilité

  • La racine est un <nav> avec le label « Pagination », et la page courante porte aria-current="page".
  • À la première et à la dernière page, Précédent et Suivant utilisent aria-disabled plutôt que disabled, pour ne pas perdre le focus en arrivant au bout.
  • L'indicateur glissant devient un fondu quand la réduction des animations est activée.

Référence de l’API

Pagination

PropTypePar défaut
countNombre total de pages. Lorsqu'il est défini, la barre est construite pour vous ; omettez-le pour composer les parties.
number–
page
number–
defaultPage
number1
onPageChange
(page: number) => void–
getPageHrefRend les pages comme des liens plutôt que des boutons.
(page: number) => string–
siblingsPages affichées de chaque côté de la page courante.
number1
boundariesPages toujours affichées au début et à la fin.
number1
compactauto passe à Précédent, « Page x sur y » et Suivant quand la barre ne tient pas.
boolean | "auto""auto"
jumpPermet aux points de suspension d'ouvrir un champ de page.
booleantrue
AttributDescription
data-slot="pagination"La nav.
data-slot="pagination-indicator"L'arrière-plan qui glisse jusqu'à la page courante.

PaginationLink

PropTypePar défaut
isActiveMarque la page courante avec aria-current="page".
booleanfalse
disabledDéfinit aria-disabled et ignore les clics.
booleanfalse
render
ReactElement | (props, state) => ReactElement<a>
AttributDescription
data-slot="pagination-link"Cible les liens de page en CSS.
data-activePrésent sur la page courante.

PaginationPrevious / PaginationNext

PropTypePar défaut
textPassez null pour un bouton réduit à une icône.
ReactNode"Previous" / "Next"
disabled
booleanfalse

PaginationEllipsis

PropTypePar défaut
onJumpFait des points de suspension un champ de page. Sans cela, ils sont décoratifs.
(page: number) => void–
countLa page la plus haute que le champ accepte.
number–

usePagination

PropTypePar défaut
page
number–
count
number–
siblings
number1
boundaries
number1

Renvoie items, la page et le count bornés, ainsi que hasPrevious et hasNext. Consultez le guide de usePagination pour construire votre propre pagination.

Voir aussi