Pagination

Navegue através de páginas de dados com controles customizáveis.

Importação

import { Pagination } from 'asterui'

Exemplos

Paginação Básica

Paginação simples com números de página.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={85}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Com Alterador de Tamanho

Permite aos usuários alterar o tamanho da página.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  return (
      <Pagination
        current={current}
        total={500}
        pageSize={pageSize}
        showSizeChanger
        onChange={(page, size) => {
          setCurrent(page);
          setPageSize(size);
        }}
      />
    )
}

export default App

Mostrar Total

Exibe contagem total de itens.

Total 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={250} showTotal />
    )
}

export default App

Total Customizado

Renderização customizada da contagem total.

Showing 1-10 of 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination
        total={250}
        showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total} items`}
      />
    )
}

export default App

Salto Rápido

Permite aos usuários pular para uma página específica.

Go to

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={500} showQuickJumper />
    )
}

export default App

Todos os Recursos

Paginação com todos os recursos habilitados.

1-10 of 500

Go to

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={500}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Modo Simples

Paginação mínima com apenas controles anterior/próximo.

1 / 10

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} simple />
    )
}

export default App

Tamanhos

Diferentes tamanhos para controles de paginação.

Extra Small

Small

Medium (default)

Large

import { Pagination } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <div>
          <div className="text-sm text-base-content/60 mb-2">Extra Small</div>
          <Pagination total={100} size="xs" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Small</div>
          <Pagination total={100} size="sm" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Medium (default)</div>
          <Pagination total={100} size="md" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Large</div>
          <Pagination total={100} size="lg" />
        </div>
      </div>
    )
}

export default App

Desabilitado

Estado desabilitado para paginação.

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} disabled />
    )
}

export default App

API

`Pagination`

Propriedade	Descrição	Tipo	Padrão
`current`	Número da página atual (controlado)	`number`	-
`defaultCurrent`	Número da página inicial padrão	`number`	`1`
`total`	Número total de itens	`number`	-
`pageSize`	Número de itens por página (controlado)	`number`	-
`defaultPageSize`	Número padrão de itens por página	`number`	`10`
`pageSizeOptions`	Opções para seletor de tamanho de página	`number[]`	`[10, 20, 50, 100]`
`onChange`	Callback quando página ou pageSize muda	`(page: number, pageSize: number) => void`	-
`onShowSizeChange`	Callback quando pageSize muda	`(current: number, size: number) => void`	-
`showSizeChanger`	Mostrar seletor de tamanho de página	`boolean`	`false`
`showQuickJumper`	Mostrar entrada de salto rápido para página	`boolean`	`false`
`showTotal`	Mostrar contagem total ou função de renderização customizada	`boolean \| ((total: number, range: [number, number]) => ReactNode)`	`false`
`simple`	Modo simples com controles mínimos	`boolean`	`false`
`size`	Tamanho dos botões de paginação	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`disabled`	Desabilitar todos os controles de paginação	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-

Acessibilidade

Usa elemento nav com aria-label="Pagination"
Página atual é marcada com aria-current="page"
Botões desabilitados têm estado aria-disabled apropriado
Entrada de salto rápido tem rótulo acessível