Componente

Stepper

Um indicador de progresso passo a passo. Declare passos com títulos, descrições e ícones, renderize conteúdo por passo, vincule o passo ativo, navegue entre passos, imponha um fluxo linear, e disponha-o horizontal ou verticalmente.

Passos e conteúdo

Enter the title and city.

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

import { HbButtonComponent, HbStepperImports, type HbStepValue } from '@herbst/ui';

@Component({
  selector: 'hb-demo-stepper-basic',
  imports: [HbStepperImports, HbButtonComponent],
  template: `
    <hb-stepper class="w-full max-w-lg" [(hbValue)]="active">
      <hb-step hbTitle="Details" hbDescription="Photo info">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Enter the title and city.</p>
            <div class="mt-3 flex justify-end">
              <button hb-button hbSize="sm" (click)="ctx.next()">Next</button>
            </div>
          </div>
        </ng-template>
      </hb-step>

      <hb-step hbTitle="Photos" hbDescription="Upload">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Attach your autumn photos.</p>
            <div class="mt-3 flex justify-between">
              <button hb-button hbType="outline" hbSize="sm" (click)="ctx.prev()">Back</button>
              <button hb-button hbSize="sm" (click)="ctx.next()">Next</button>
            </div>
          </div>
        </ng-template>
      </hb-step>

      <hb-step hbTitle="Review" hbDescription="Confirm">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Everything looks good — save the record.</p>
            <div class="mt-3 flex justify-start">
              <button hb-button hbType="outline" hbSize="sm" (click)="ctx.prev()">Back</button>
            </div>
          </div>
        </ng-template>
      </hb-step>
    </hb-stepper>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoStepperBasicComponent {
  protected readonly active = signal<HbStepValue>(1);
}

Linear, ícones e navegação externa

Vertical e desabilitado

Take photos of the falling leaves.

Referência de API

hb-stepper

Propriedade	Descrição	Tipo	Padrão
[(hbValue)]	O valor do passo ativo (padrão é o índice+1 de cada passo), bidirecional.	number \| string	1
[hbOrientation]	Dispõe os passos em linha (conteúdo abaixo) ou coluna (conteúdo inline).	'horizontal' \| 'vertical'	'horizontal'
[hbLinear]	Permite ir apenas para o passo atual ou anteriores; passos futuros não são clicáveis.	boolean	false
exportAs "hbStepper"	Referencie a instância para chamar next(), prev(), activate(value), e ler isFirst(), isLast(), activeIndex().	methods / signals	—

hb-step

Propriedade	Descrição	Tipo	Padrão
[hbTitle] / [hbDescription]	O rótulo do passo e seu texto de apoio.	string	''
[hbValue]	O valor que este passo ativa (padrão é seu índice+1).	number \| string	index + 1
[hbIcon] / [hbDisabled]	Um ícone de marcador (um check aparece automaticamente ao concluir), e um estado desabilitado.	string / boolean	— / false
ng-template[hbStepContent]	O painel deste passo. Contexto: $implicit = { active, index, isFirst, isLast, next(), prev(), activate() }.	template	—