Componente
Panel
Um container titulado e opcionalmente colapsável. Dê a ele um cabeçalho e conteúdo, escolha se o ícone ou o cabeçalho inteiro o alterna, posicione o caret, controle o estado colapsado, e faça template do cabeçalho, ações, indicador e rodapé.
Painel colapsável
Photo details
Oak leaves along the trail — taken in Freiburg, November 2026. A cool, misty morning.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HbPanelImports } from '@herbst/ui';
@Component({
selector: 'hb-demo-panel-basic',
imports: [HbPanelImports],
template: `
<hb-panel class="w-full max-w-md" hbHeader="Photo details" hbToggleable>
<p class="text-sm text-muted-foreground">
Oak leaves along the trail — taken in Freiburg, November 2026. A cool, misty morning.
</p>
</hb-panel>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPanelBasicComponent {}
Toggler, posição do ícone e desabilitado
Click anywhere on the header
The whole header is the toggle, and the caret sits at the start.
collapsed = true
Disabled — cannot toggle
This panel is locked open.
Cabeçalho, ações, indicador e rodapé
Black Forest
Oak leaves along the trail. A cool, misty morning near Freiburg on 3 November.
Updated November 2026
Referência de API
hb-panel
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| [hbHeader] | O texto do cabeçalho. Ignorado quando um template hbPanelHeader é fornecido. | string | '' |
| [hbToggleable] | Habilita o colapso. Sem ele, o painel é um container estático. | boolean | false |
| [(hbCollapsed)] | O estado colapsado, bidirecional. | boolean | false |
| [hbToggler] | O que alterna o painel: apenas o botão de caret, ou o cabeçalho inteiro. | 'icon' | 'header' | 'icon' |
| [hbIconPos] | Coloca o caret de alternância no início ou no fim do cabeçalho. | 'start' | 'end' | 'end' |
| [hbToggleIcon] / [hbDisabled] | Sobrescreve o ícone do caret, e trava o painel para que não alterne. | string / boolean | 'phosphorCaretDown' / false |
| (hbToggle) | Emite o novo estado colapsado cada vez que alterna. | boolean | — |
Template slots
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| ng-template[hbPanelHeader] | Conteúdo customizado do cabeçalho, substituindo o texto hbHeader. | template | — |
| ng-template[hbPanelIcons] | Controles de ação à direita do cabeçalho (seus cliques não alternam o painel). | template | — |
| ng-template[hbPanelIndicator] | Indicador de alternância customizado. Contexto: $implicit = collapsed, collapsed. | template | — |
| ng-template[hbPanelFooter] | Conteúdo de rodapé mostrado abaixo do corpo projetado, dentro da região colapsável. | template | — |