Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Pagination

Paginação — percorre uma lista longa uma página por vez e mostra onde a pessoa está nela. Os números são links para páginas que um buscador deve encontrar, ou botões para uma lista que vive no navegador.

Padrão WAI-ARIA Landmark (navigation)Componente clienteCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. O DataTable já traz a paginação; use ela sozinha para qualquer outra lista.

import { Pagination } from "@camaleo/react";

Anatomia

Um landmark nav em volta de uma lista. O primeiro e o último itens são Anterior e Próxima; entre eles, os números das páginas e os intervalos. A quantidade de itens não muda quando a página muda, então o controle não pula de largura.

Exemplos

Todo exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da marca escolhidos na barra acima.

minimal · light · #3fa34d
Arquivo do blog · Página 1 de 8

Links, para páginas que se compartilham

Passe getHref quando cada página tiver sua própria URL: os buscadores seguem os links, e as pessoas podem abrir uma página em outra aba ou compartilhar.

Pedidos recentes

  • #4821R$ 49,90Mariana LimaPago
  • #4820R$ 87,69Rafael SouzaPago
  • #4819R$ 125,48Camila FerreiraPendente
  • #4818R$ 163,27Lucas OliveiraPago

Uma lista no navegador

Mude de página. Com onPageChange os números são botões; o foco fica no que você apertou, e uma mensagem de status diz "Página 3 de 10".

Fotos da viagem · Página 12 de 24

Compacta, para celular

Com setas em texto e uma vizinha, a fileira quebra em duas linhas abaixo de uns 420px. siblings={0} e os nomes das setas em VisuallyHidden deixam ela abaixo de 310px em todos os estilos, numa linha só num celular de 390px; o total vai para o texto acima.

Mostrando 21–40 de 312

Com tamanho da página e contagem

Mude as linhas por página. "Mostrando 21–40 de 312" diz quanto conteúdo há, e a nova página mantém a primeira linha que você estava vendo.

Primeira e última sempre à vista

A primeira e a última páginas nunca saem da fileira, então um só toque volta ao início ou vai direto ao fim de 48 páginas.

siblings=0
siblings=1
siblings=2

Vizinhas

siblings define quantas páginas aparecem de cada lado da atual. Use 0 em lugares estreitos e 2 quando as pessoas costumam pular algumas páginas.

Nomes para o leitor de tela

Traduza o aria-label, as setas e o pageLabel. Com o total no pageLabel, cada número é lido como "Página 3 de 12".

Em contexto

Estas são partes inteiras de interface que você pode copiar, no estilo que escolheu.

Arquivo do blogCard · Link · Badge · Pagination

Pedidos recentes

PedidoClienteSituaçãoTotal
#5132Mariana LimaPagoR$ 49,90
#5131Rafael SouzaPagoR$ 87,69
#5130Camila FerreiraPendenteR$ 125,48
#5129Lucas OliveiraPagoR$ 163,27
#5128Fernanda RochaPagoR$ 201,06
Mostrando 1–5 de 312
Tabela de pedidosTable · Badge · NativeSelect · Pagination
14 artigos para "reembolso"
  1. Como reembolsar um pedidoO reembolso total volta para o mesmo meio de pagamento em 5 a 10 dias úteis.
  2. Como responder a um chargebackEnvie o comprovante de entrega em até 7 dias para o banco analisar a contestação.
  3. Reembolso parcial e crédito na lojaDevolva parte do pedido ou dê um crédito para o cliente usar na próxima compra.
Resultados de buscaSearchInput · Link · Pagination · VisuallyHidden

Boas práticas

Mostrando 21–40 de 312
FaçaDiga onde a pessoa está e quanto há.

A página atual e "Mostrando 21–40 de 312" respondem às duas perguntas antes que alguém faça.

EviteSó Anterior e Próxima.

Sem o número da página nem um total, a pessoa não sabe quanto já andou nem quanto falta.

Membros da equipe
  • Ana Ribeiro
  • Carlos Mendes
  • Júlia Santos
  • Pedro Almeida
  • Beatriz Costa
FaçaMostre uma lista curta inteira.

Cinco nomes cabem na tela. Ler todos leva menos tempo do que achar a próxima página.

Membros da equipe
  • Ana Ribeiro
  • Carlos Mendes
EvitePaginar uma lista minúscula.

Três páginas de dois nomes escondem quase toda a lista atrás de cliques, e o Ctrl+F para de encontrá-los.

Props

PropriedadeTipoPadrãoDescrição
page*number—A página atual, a partir de 1.
count*number—O total de páginas.
siblingsnumber1Páginas mostradas de cada lado da atual. A primeira e a última sempre aparecem.
getHref((page: number) => string)—Renderiza links (que os buscadores seguem e que abrem em outra aba). Passe esta ou onPageChange.
onPageChange((page: number) => void)—Renderiza botões e é chamada com a página escolhida, para estado no cliente.
previousLabelReactNode"Previous"Conteúdo do controle de página anterior, depois da seta. Traduza.
nextLabelReactNode"Next"Conteúdo do controle de próxima página, antes da seta. Traduza.
pageLabel((page: number) => string)(page) => `Page ${page}`Nome acessível de cada número de página. Traduza.

As demais props vão para o nav. Passe getHref (links) ou onPageChange (botões).

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria paginação.

Atributos

aria-current"page" na página atual
aria-disabled"true" em Anterior na página 1 e em Próxima na última

Tokens que ele lê

Cor

--cml-border--cml-fg--cml-fg-muted--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-control-height--cml-radius-control

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-size-control--cml-font-weight-control

Só deste componente

--cml-corner-shape--cml-disabled-opacity--cml-item-highlight
/* números quadrados na tabela de pedidos */
.orders [data-slot="pagination-item"] {
  --cml-radius-control: 4px;
}

Acessibilidade

TabPassa por Anterior, cada número de página e Próxima, em ordem. Os intervalos … são pulados.
Shift + TabVolta pelos mesmos controles.
EnterVai para a página focada. Com botões, o Espaço também.
Enter em Próxima na última páginaCom botões, não faz nada e o foco fica em Próxima: ela tem aria-disabled, não disabled. Com links, o controle da ponta não tem href e o Tab pula ele.

Relacionados

DataTableOrdenação, seleção e paginação para dados em tabela.BreadcrumbOnde uma página fica na hierarquia do site.Native selectA escolha de linhas por página ao lado dela.
Esta página foi útil? · Editar esta página no GitHub