Componente

Segmented

Um seletor de escolha única compacto. Passe opções como dados ou declare-as como itens, vincule o valor, adicione ícones, dimensione, estique à largura total, e desabilite o controle inteiro ou opções individuais. As setas movem a seleção.

Opções e valor

Selected: all

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbSegmentedImports, type HbSegmentedOption } from '@herbst/ui';

@Component({
  selector: 'hb-demo-segmented-basic',
  imports: [HbSegmentedImports],
  template: `
    <div class="flex flex-col items-start gap-2">
      <hb-segmented [hbOptions]="options" [(hbValue)]="view" hbAriaLabel="Catalogue view" />
      <p class="font-mono text-[12px] text-muted-foreground">Selected: {{ view() }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSegmentedBasicComponent {
  protected readonly view = signal('all');
  protected readonly options: HbSegmentedOption[] = [
    { value: 'all', label: 'All' },
    { value: 'photos', label: 'Photos' },
    { value: 'videos', label: 'Videos' },
    { value: 'archived', label: 'Archived', disabled: true },
  ];
}

Itens declarativos e ícones

Tamanhos, fluido e desabilitado

Referência de API

hb-segmented

Propriedade	Descrição	Tipo	Padrão
[hbOptions]	As escolhas como dados. Cada uma é { value, label, disabled?, icon? }. Omita para declarar filhos hb-segmented-item.	HbSegmentedOption[]	[]
[(hbValue)]	O valor selecionado, bidirecional. Também funciona como controle de formulário via ngModel / formControl.	string	''
[hbSize]	A altura do controle e a escala do texto.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbFluid]	Estica até a largura total do container, dividindo-a igualmente entre as opções.	boolean	false
[hbDisabled]	Desabilita o controle inteiro.	boolean	false
[hbAriaLabel]	O rótulo acessível para o radiogroup.	string	''

hb-segmented-item

Propriedade	Descrição	Tipo	Padrão
[value]	O valor contribuído por esta opção (obrigatório).	string	required
[label] / [hbIcon]	O texto visível e um nome de ícone opcional à frente.	string	''
[hbDisabled]	Desabilita esta opção.	boolean	false