Pagination
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Contextual
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível usado por tecnologias assistivas. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam ariaLabel. |
| 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 do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| 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' |
Slots
| Nome | Descrição |
|---|---|
"pagination-info" | Informação customizada da paginação contextual. Quando utilizado, o texto padrão de contagem é substituído. |
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 |
Métodos
setPage
| Assinatura | setPage(page: number) => Promise<void> |
| Descrição | Define programaticamente a página atual dentro do intervalo permitido. |
| Parâmetros | page: Página desejada (1-indexada). |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"ellipsis" | Parte para o botão de reticências e seu contêiner. |
"list" | Parte para a lista de páginas (elemento ul), usada para estilização via ::part(). |
"nav" | Parte para o contêiner raiz da paginação (elemento nav), usada para estilização via ::part(). |
"next-button" | Parte para o botão de próxima página, usada para estilização via ::part(). |
"page" | Parte para os itens de página numérica (elemento a), usada para estilização via ::part(). |
"per-page" | Parte para o seletor de itens por página na variante contextual. |
"prev-button" | Parte para o botão de página anterior, usada para estilização via ::part(). |