Ravox KitNavegação
Paginação
Anterior, próximo e as páginas com reticências que não fazem os botões pularem de lugar. Mostra "1–24 de 415", vira link de verdade com href (e o <Link> do Next com link) e encolhe para "3 de 18" quando falta espaço.
Ajustes
Tamanho
Exemplos
Embaixo de uma lista
- #4821Pix · pago
- #4820Cartão 3x · pago
- #4819Pix · aguardando
Links com o Next (página na URL)
Poucas páginas: sem reticências
Compacta (pouco espaço)
Instalação
O shadcn cria components/ui/paginacao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/paginacao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| pagina | number | — | Página atual, começando em 1. |
| total / porPagina | number | — | Total de itens e itens por página: calculam as páginas e o resumo. |
| paginas | number | — | Total de páginas direto, quando não há total de itens. |
| aoMudar | (pagina: number) => void | — | Modo botão: chamado com a nova página. |
| href | (pagina: number) => string | — | Modo link: o endereço de cada página (bom para SEO e para abrir em outra aba). |
| link | (props) => ReactElement | — | Troca o <a> padrão, ex.: (p) => <Link {...p} />. |
| vizinhos | number | 1 | Quantas páginas aparecem de cada lado da atual. |
| mostrarResumo | boolean | false | Mostra "1–24 de 415" (precisa de total e porPagina). |
| nomeItens | string | — | Nome dos itens no resumo: "de 415 pedidos". |
| tamanho | "pequeno" | "medio" | "medio" | Altura das casas: 32 ou 36px. |