Pharos
Navegar componentes
← Componentes

Pagination

MiscExemplo
Pagination permite que usuários percorram páginas de conteúdo. Coloque-o abaixo de uma tabela, lista ou grid de cards para que usuários possam avançar e retroceder pelos resultados. Escolha uma variant para corresponder ao contexto: páginas numeradas para tabelas de dados, contagem para listas grandes, compact para espaços apertados ou dots para carousels.
Importação
import {Pagination} from '@pharos-ds/core/Pagination';

Exemplos

Área interativa

variant
size
isDisabled
Código
import {Pagination} from '@pharos-ds/core/Pagination';

<Pagination
  variant="pages"
  size="md"
  isDisabled={false}
 />

Boas práticas

  • Faça: Coloque pagination abaixo do conteúdo que ele controla para que usuários vejam resultados antes de navegar.
  • Faça: Use a variant pages para tabelas de dados em que usuários precisam pular para uma página específica.
  • Faça: Use a variant count com um seletor de page size quando usuários precisarem controlar quantos itens veem de uma vez.
  • Faça: Use a variant dots para carousels e walkthroughs em que o total é pequeno e a posição importa mais que um número.
  • Faça: Passe totalItems quando o total for conhecido para que usuários vejam quanto conteúdo resta.
  • Evite: Mostre pagination quando todos os itens cabem em uma única página; não há nada para paginar.
  • Evite: Use a variant dots para mais de cerca de 10 páginas; os dots ficam pequenos demais para serem úteis.
  • Evite: Coloque pagination acima do conteúdo; usuários esperam encontrá-lo na parte inferior.

Props

PropTipoPadrãoDescrição
page *number—Número da página atual (base 1). Página 1 é a primeira página.
onChange *(page: number) => void—Chamado quando a página muda.
changeAction(page: number) => void | Promise<void>—Ação assíncrona na mudança de página. Dispara após onChange e usa React transitions para estado de carregamento integrado.
totalItemsnumber—Número total de itens. Usado para calcular a contagem de páginas. Tem precedência sobre totalPages se ambos forem fornecidos.
totalPagesnumber—Número total de páginas. Use quando souber a contagem de páginas mas não a de itens.
hasMoreboolean—Se existem mais páginas após a atual. Use para pagination baseada em cursor em que o total é desconhecido.
pageSizenumber10Número de itens por página. Coerced para inteiro positivo; valores não finitos voltam ao padrão.
pageSizeOptionsnumber[]—Opções de page size disponíveis. Exibe um dropdown seletor de page size quando fornecido.
onPageSizeChange(pageSize: number) => void—Chamado quando o page size muda. Redefine automaticamente para a página 1.
variant'pages' | 'count' | 'compact' | 'dots' | 'none''pages'Variant visual que controla o que aparece entre botões prev/next. 'pages' mostra botões de número de página com ellipsis, 'count' mostra texto 'X-Y of Z', 'compact' mostra 'Page X of Y', 'dots' mostra indicadores de dot, 'none' mostra apenas botões prev/next.
siblingCountnumber1Número de botões de página a exibir de cada lado da página atual. Aplica-se apenas quando variant='pages'.
size'sm' | 'md''md'Size dos controles de pagination.
isDisabledbooleanfalseSe o componente está desabilitado.
labelstring'Pagination'Label acessível para o landmark de navegação.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Pagination
Pagination · Pharos