Componente
Pagination
Um navegador de páginas que calcula seus próprios números e reticências. Derive a contagem de páginas de um total, controle quantas páginas vizinhas e de borda aparecem, adicione botões primeiro/último e anterior/próximo rotulados, dimensione-o e faça template de cada parte.
A partir de um total
Page 1 of 25
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { HbPaginationImports } from '@herbst/ui';
@Component({
selector: 'hb-demo-pagination-basic',
imports: [HbPaginationImports],
template: `
<div class="flex flex-col items-start gap-2">
<hb-pagination [(hbPage)]="page" [hbTotal]="248" [hbPageSize]="10" />
<p class="font-mono text-[12px] text-muted-foreground">Page {{ page() }} of 25</p>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPaginationBasicComponent {
protected readonly page = signal(1);
}
Primeiro/último, rótulos, vizinhos e tamanhos
Página e reticências customizadas
- ‹‹
- ››
Referência de API
hb-pagination — pages
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| [(hbPage)] | A página atual (base 1), bidirecional. | number | 1 |
| [hbPageCount] | O número total de páginas, dado diretamente. Tem precedência sobre hbTotal. | number | 0 |
| [hbTotal] / [hbPageSize] | Deriva a contagem de páginas como ceil(total / pageSize) quando hbPageCount não é definido. | number | 0 / 10 |
| [hbSiblings] / [hbBoundaries] | Quantas páginas mostrar ao redor da atual, e em cada extremidade, antes de colapsar numa reticência. | number | 1 / 1 |
hb-pagination — controls
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| [hbSize] / [hbDisabled] | Tamanho do botão, e uma flag que bloqueia toda a navegação. | 'xs'–'xl' / boolean | 'md' / false |
| [hbShowPrevNext] / [hbShowFirstLast] | Alterna as setas anterior/próximo e os botões de ir ao primeiro/último. | boolean | true / false |
| [hbPreviousLabel] / [hbNextLabel] | Texto opcional exibido ao lado das setas anterior/próximo. | string | '' |
| icon inputs | hbPreviousIcon, hbNextIcon, hbFirstIcon, hbLastIcon, hbEllipsisIcon sobrescrevem os ícones phosphor padrão. | string | phosphorCaret… |
| [hbAriaLabel] | O rótulo acessível para o landmark de navegação. | string | 'pagination' |
Template slots
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| ng-template[hbPageTemplate] | Substitui cada botão de página. Contexto: $implicit = page, active, disabled. | template | — |
| ng-template[hbEllipsisTemplate] | Substitui a reticência. Contexto: $implicit = side ("left" | "right"). | template | — |
| ng-template[hbPreviousTemplate] / [hbNextTemplate] | Substitui os botões anterior/próximo. Contexto: $implicit = página alvo, disabled. | template | — |