Componentes
Pagination
Intervalo em Sora tabular e duas setas no rodapé da lista. No estreito o texto sai da vista e fica no leitor.
Exemplos#
Intervalo, não pílulas
Mesa
Celular · 390
No celular o intervalo fica com o leitor
Salto de página e tamanho da lista
Importar#
import { Pagination } from "@hiboupay/react";
import type { PaginationProps } from "@hiboupay/react";Quando usar#
Use quando
- Rodapé de DataTable ou lista longa.
- Quando a pessoa precisa saber onde está (1–20 de 240).
Não use quando
- Poucos itens: mostre tudo.
- Carregar mais no scroll (isso é do app, não do Core).
Variantes#
compacta
Abaixo de md o intervalo fica só para o leitor. As setas continuam.
com salto
Input mono "Ir para a página" quando a lista é longa.
Anatomia#
- 01Texto hb-num: intervalo e total
- 02Select de tamanho quando há opções
- 03Campo mono para saltar de página
- 04Botão ícone anterior
- 05Botão ícone próximo
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| page* | number | Página atual, 1-based. | |
| pageSize* | number | Itens por página. | |
| total* | number | Total de itens. | |
| onPageChange* | (page: number) => void | Nova página. | |
| noun* | { one: string; many: string } | one: "pagamento". many: "pagamentos". | |
| pageSizeOptions | number[] | Quando passa, um Select troca o tamanho. | |
| onPageSizeChange | (pageSize: number) => void | Novo tamanho. Volte a página para 1 no app. | |
| jump | boolean | false | Mostra o campo para ir a uma página. |
| loading | boolean | false | Desabilita as setas e marca aria-busy. |
Acessibilidade#
Teclado
Leitor de tela
- —nav aria-label Paginação. O intervalo tem aria-live, mesmo quando some no estreito.
- —Setas com aria-label Página anterior / Próxima página.
Boas práticas#
Faça
- pageSize estável (20 ou 50).
- Vazio é EmptyState na tabela; a paginação diz "Nenhum".
Evite
- Pílulas 1 2 3 4 … 99.
- Escrever "N/A" quando total é 0.
Conteúdo#
- —one no singular e many no plural, minúsculos: "pagamento" / "pagamentos".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Dados
DataTable
Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.
Estado
EmptyState
Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.