Pagination
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Contextual
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Densidade
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Rótulo acessível do container nav.Se não fornecido, será gerado automaticamente um rótulo descritivo e único no momento da renderização (ex.: "Paginação: página 2 de 10"). |
| Tipo | string |
| Valor padrão | --- |
colorMode
| Atributo | color-mode |
| Descrição | Define se a paginação usará um esquema de cores escuro. Quando definido como dark, aplica a classe dark-mode ao container principal. |
| Tipo | "dark" |
| Valor padrão | --- |
current
| Atributo | current |
| Descrição | Página atual (1-indexada). Valores fora do intervalo serão ajustados. |
| Tipo | number |
| Valor padrão | 1 |
customId
| Atributo | custom-id |
| Descrição | Identificador único; gerado automaticamente quando omitido. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId('br-pagination') |
density
| Atributo | density |
| Descrição | Ajusta a densidade da paginação, alterando o espaçamento interno para um visual mais compacto ou mais expandido. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
ellipsisLabel
| Atributo | ellipsis-label |
| Descrição | Rótulo acessível do botão de reticências que abre a lista de páginas ocultas. |
| Tipo | string |
| Valor padrão | 'Abrir ou fechar a lista de paginação' |
goToPageLabel
| Atributo | go-to-page-label |
| Descrição | Rótulo do seletor "ir para página" (variante contextual). |
| Tipo | string |
| Valor padrão | 'Página' |
itemsText
| Atributo | items-text |
| Descrição | Sufixo textual para a informação de quantidade de itens (variante contextual). |
| Tipo | string |
| Valor padrão | 'itens' |
nextLabel
| Atributo | next-label |
| Descrição | Rótulo acessível do botão de próxima página. |
| Tipo | string |
| Valor padrão | 'Página seguinte' |
perPage
| Atributo | per-page |
| Descrição | Itens por página (aplicável na variante contextual). |
| Tipo | number |
| Valor padrão | 10 |
perPageLabel
| Atributo | per-page-label |
| Descrição | Rótulo do seletor de itens por página (variante contextual). |
| Tipo | string |
| Valor padrão | 'Exibir' |
perPageOptions
| Atributo | --- |
| Descrição | Opções disponíveis de itens por página (variante contextual). |
| Tipo | number[] |
| Valor padrão | [10, 20, 30] |
previousLabel
| Atributo | previous-label |
| Descrição | Rótulo acessível do botão de página anterior. |
| Tipo | string |
| Valor padrão | 'Voltar página' |
total
| Atributo | total |
| Descrição | Quantidade total de páginas (mínimo 1). |
| Tipo | number |
| Valor padrão | 1 |
totalItems
| Atributo | total-items |
| Descrição | Total de itens (aplicável na variante contextual). |
| Tipo | number |
| Valor padrão | --- |
variant
| Atributo | variant |
| Descrição | Variante de renderização do componente. - default: paginação numérica (padrão)- contextual: paginação contextual com seletores e informação de itens |
| Tipo | "contextual" | "default" |
| Valor padrão | 'default' |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
pageChange | Emite quando a página muda por interação do usuário. | true |
perPageChange | Emite quando o valor de itens por página é alterado (variante contextual). | true |