Componente

Tabs

Um conjunto de painéis exibidos um por vez atrás de uma fileira de gatilhos. Faça bind bidirecional do valor ativo, escolha a variante line, pills ou underline, dimensione e alinhe os gatilhos, posicione a lista em qualquer lado, role tabs que transbordam com setas, ative por foco ou por clique, renderize painéis sob demanda e troque o indicador ativo por um template.

Valor, ícones e badges

Photos

Forests12

Alerts3

Archive

42 autumn photos from four forests.

value: photos · last change: —

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { phosphorBell, phosphorLeaf, phosphorTag } from '@ng-icons/phosphor-icons/regular';

import { HbTabsImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-tabs-basic',
  imports: [HbTabsImports],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorTag, phosphorBell })],
  template: `
    <hb-tabs class="w-full max-w-md" [(hbValue)]="tab" (hbChange)="last.set($event)">
      <hb-tab-list>
        <hb-tab hbValue="photos" hbIcon="phosphorLeaf">Photos</hb-tab>
        <hb-tab hbValue="forests" hbIcon="phosphorTag" [hbBadge]="12">Forests</hb-tab>
        <hb-tab hbValue="alerts" hbIcon="phosphorBell" [hbBadge]="3">Alerts</hb-tab>
        <hb-tab hbValue="archive" hbDisabled>Archive</hb-tab>
      </hb-tab-list>

      <hb-tab-panel hbValue="photos">
        <p class="text-sm text-muted-foreground">42 autumn photos from four forests.</p>
      </hb-tab-panel>
      <hb-tab-panel hbValue="forests">
        <p class="text-sm text-muted-foreground">Six forests around Freiburg.</p>
      </hb-tab-panel>
      <hb-tab-panel hbValue="alerts">
        <p class="text-sm text-muted-foreground">Three photos still need captions.</p>
      </hb-tab-panel>
    </hb-tabs>

    <p class="mt-3 font-mono text-[12px] text-muted-foreground">
      value: {{ tab() }} · last change: {{ last() }}
    </p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTabsBasicComponent {
  protected readonly tab = signal<unknown>('photos');
  protected readonly last = signal<unknown>('—');
}

Variante, tamanho, posição e alinhamento

Walk

Edit

Wander the forest as the leaves fall.

Scroll, manual, lazy e indicador

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Collections logged in Jan.

manual activation — arrow to move focus, Enter/Space to open · Jan

Referência de API

hb-tabs

Propriedade	Descrição	Tipo	Padrão
[(hbValue)]	O valor da tab ativa, bidirecional. Qualquer tipo de valor — comparado por igualdade estrita.	unknown	undefined
[hbDefaultValue]	Valor inicial quando hbValue é undefined; caso contrário, usa a primeira tab habilitada.	unknown	undefined
(hbChange)	Emite o valor quando uma tab é ativada.	unknown	—
[hbVariant]	Estilo dos gatilhos e do indicador.	'line' \| 'pills' \| 'underline'	'line'
[hbSize]	Altura, padding e escala de texto dos gatilhos.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbPosition]	Lado onde a lista de tabs fica; left/right tornam as tabs verticais.	'top' \| 'bottom' \| 'left' \| 'right'	'top'
[hbAlign]	Distribuição dos gatilhos ao longo da lista; stretch os faz preencher a largura igualmente.	'start' \| 'center' \| 'end' \| 'stretch'	'start'
[hbActivationMode]	Automatic ativa a tab focada conforme você navega com as setas; manual espera Enter/Espaço ou clique.	'automatic' \| 'manual'	'automatic'

hb-tabs — overflow & indicator

Propriedade	Descrição	Tipo	Padrão
[hbShowArrows]	Força o container de rolagem e mostra setas de voltar/avançar quando as tabs transbordam.	boolean	false
[hbScrollThreshold]	Passa para a lista rolável quando a contagem de tabs excede este número (0 desabilita).	number	0
[hbIndicatorClass]	Classes extras mescladas no indicador ativo que se move.	ClassValue	''
exportAs "hbTabs"	Referencie a instância para ler value()/isActive() ou chamar select(value).	methods	—

Parts

Propriedade	Descrição	Tipo	Padrão
hb-tab-list [class]	A linha/coluna role="tablist" de gatilhos; hospeda o indicador e as setas de rolagem.	component	—
hb-tab [hbValue] [hbDisabled] [hbIcon] [hbBadge]	Um gatilho. hbValue o liga ao seu painel; hbIcon renderiza um ícone à esquerda; hbBadge mostra uma pílula de contagem.	unknown / boolean / string / string \| number	null / false / "" / null
hb-tab-panel [hbValue] [hbLazy]	O conteúdo de um valor; oculto a menos que ativo. hbLazy adia a renderização até a primeira ativação.	unknown / boolean	null / false
hb-tab-menu	Uma lista de tabs autônoma (com seu próprio contexto hb-tabs) para barras de menu/navegação sem painéis.	component	—
ng-template[hbTabsIndicator]	Projeta conteúdo customizado no indicador ativo que se move.	template	—