72Começar
HextaUI

Pagination

Navegação de páginas que mantém cada botão no lugar, desliza até a página atual e salta para qualquer página a partir das reticências.

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>
  )
}

Instalação

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

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Uso

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

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

Dê a Pagination um count e ela monta a barra inteira. Ela sempre mostra o mesmo número de slots, então Previous, Next e os números nunca se deslocam sob o cursor enquanto você clica pelas páginas. Omita count para compor as partes você mesmo.

Composição

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

Exemplos

Ir para uma página

Clique em uma reticência para digitar um número de página. Enter salta, um número fora do intervalo faz o campo tremer, e Esc devolve a reticência. Desative com 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} />
}

Compacto

Quando a barra não cabe no contêiner, ela passa para Previous, “Page 4 of 24” e Next, e volta quando há espaço. O rótulo também é um campo de salto. Force qualquer um dos layouts com 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>
  )
}

Links

Com getPageHref, cada página é um link de verdade, então pode ser aberta em uma nova aba. Cliques simples ainda chamam 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}
    />
  )
}

Composável

Sem count, monte a barra a partir das partes, como no shadcn/ui. Passe render para usar o link do seu roteador.

"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>
  )
}

Da direita para a esquerda

usePagination retorna os itens de página e de reticências para layouts personalizados. Os chevrons se invertem em texto da direita para a esquerda.

"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>
  )
}

Teclado

TeclaAção
TabEntra na barra e sai dela. Previous e Next continuam focáveis nas extremidades.
←→Move entre Previous, as páginas e Next. Inverte em layouts da direita para a esquerda.
HomeEndMove para o primeiro ou o último item.
EnterAbre a página com foco ou o campo de página. No campo, salta para aquela página e a foca.
EscFecha o campo de página e devolve o foco à reticência.

Acessibilidade

  • A raiz é um <nav> rotulado “Pagination”, e a página atual tem aria-current="page".
  • Na primeira e na última página, Previous e Next usam aria-disabled em vez de disabled, para o foco não se perder ao chegar ao fim.
  • O indicador deslizante vira um fade quando o movimento reduzido está ativado.

Referência da API

Pagination

PropTipoPadrão
countTotal de páginas. Quando definido, a barra é montada para você; omita para compor as partes.
number–
page
number–
defaultPage
number1
onPageChange
(page: number) => void–
getPageHrefRenderiza as páginas como links em vez de botões.
(page: number) => string–
siblingsPáginas exibidas de cada lado da atual.
number1
boundariesPáginas sempre exibidas no início e no fim.
number1
compactauto passa para Previous, “Page x of y” e Next quando a barra não cabe.
boolean | "auto""auto"
jumpPermite que a reticência abra um campo de página.
booleantrue
AtributoDescrição
data-slot="pagination"A nav.
data-slot="pagination-indicator"O fundo que desliza até a página atual.

PaginationLink

PropTipoPadrão
isActiveMarca a página atual com aria-current="page".
booleanfalse
disabledDefine aria-disabled e ignora cliques.
booleanfalse
render
ReactElement | (props, state) => ReactElement<a>
AtributoDescrição
data-slot="pagination-link"Seleciona os links de página no CSS.
data-activePresente na página atual.

PaginationPrevious / PaginationNext

PropTipoPadrão
textPasse null para um botão apenas com ícone.
ReactNode"Previous" / "Next"
disabled
booleanfalse

PaginationEllipsis

PropTipoPadrão
onJumpFaz da reticência um campo de página. Sem isso, a reticência é decorativa.
(page: number) => void–
countA maior página que o campo aceita.
number–

usePagination

PropTipoPadrão
page
number–
count
number–
siblings
number1
boundaries
number1

Retorna items, page e count limitados, e hasPrevious e hasNext. Veja o guia do usePagination para montar seu próprio paginador.

Relacionados