Wizard
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Horizontal
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Vertical
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | ID customizado para o componente. Se não fornecido, um ID único será gerado automaticamente. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
initialStep
| Atributo | initial-step |
| Descrição | Índice da etapa inicial do wizard. Define qual etapa será exibida ao carregar o componente. A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). |
| Tipo | number |
| Valor padrão | 1 |
orientation
| Atributo | orientation |
| Descrição | Orientação visual do wizard. Define se os indicadores de progresso serão exibidos horizontalmente ou verticalmente. |
| Tipo | "horizontal" | "vertical" |
| Valor padrão | 'horizontal' |
progressionType
| Atributo | progression-type |
| Descrição | Tipo de progressão entre etapas. - linear: O usuário deve completar cada etapa sequencialmente. Não é possível pular etapas futuras.- nonlinear: O usuário pode navegar livremente entre qualquer etapa. |
| Tipo | "linear" | "nonlinear" |
| Valor padrão | 'nonlinear' |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para os painéis de etapa (br-wizard-panel) do wizard. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brWizardBeforeStepChange | Evento emitido ANTES de mudar de etapa (permite validação e cancelamento). Comportamento: - Disparado apenas ao AVANÇAR (targetStep > currentStep) - Não é disparado ao VOLTAR (targetStep < currentStep) - Funciona tanto para cliques nos botões quanto para cliques diretos nos steps - Pode ser cancelado com event.preventDefault() para bloquear a navegação | true |
brWizardCancel | Evento emitido ao cancelar o wizard. | true |
brWizardComplete | Evento emitido ao concluir o wizard (última etapa). | true |
brWizardNavigationBlocked | Evento emitido quando uma ação é bloqueada (validação falha, progressão linear impedida). Emite uma string indicando o motivo: 'linear-progression' ou 'validation-failed'. Use getCurrentStepIndex() para obter o contexto da etapa atual. | true |
brWizardStepChange | Evento emitido APÓS mudar de etapa com sucesso. Este evento é disparado independente da origem da navegação: - Botões "Avançar" ou "Voltar" - Click direto em um step do indicador de progresso - Chamadas programáticas via métodos públicos (goToStep, nextStep, etc) | true |
Métodos
getAllSteps
| Assinatura | getAllSteps() => Promise<HTMLElement[]> |
| Descrição | Retorna todos os painéis do wizard. |
| Parâmetros | --- |
getCurrentStep
| Assinatura | getCurrentStep() => Promise<HTMLElement | null> |
| Descrição | Retorna o elemento HTML do painel ativo no momento. |
| Parâmetros | --- |
getCurrentStepIndex
| Assinatura | getCurrentStepIndex() => Promise<number> |
| Descrição | Retorna o índice (número) da etapa atual. A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). |
| Parâmetros | --- |
getStepByIndex
| Assinatura | getStepByIndex(stepNumber: number) => Promise<HTMLElement | null> |
| Descrição | Retorna um painel específico pelo índice. |
| Parâmetros | stepNumber: - Número da etapa (numeração começa em 1) |
getTotalSteps
| Assinatura | getTotalSteps() => Promise<number> |
| Descrição | Retorna o número total de etapas do wizard. |
| Parâmetros | --- |
goToStep
| Assinatura | goToStep(stepNumber: number) => Promise<boolean> |
| Descrição | Navega para uma etapa específica. Executa validação se estiver avançando (etapa alvo > etapa atual). |
| Parâmetros | stepNumber: - Número da etapa de destino (numeração começa em 1) |
nextStep
| Assinatura | nextStep() => Promise<boolean> |
| Descrição | Avança para a próxima etapa. Executa validação via evento brWizardBeforeStepChange antes de navegar. |
| Parâmetros | --- |
previousStep
| Assinatura | previousStep() => Promise<boolean> |
| Descrição | Volta para a etapa anterior. Não executa validação ao retornar. |
| Parâmetros | --- |
reset
| Assinatura | reset() => Promise<void> |
| Descrição | Retorna à primeira etapa do wizard. Não executa validação (útil para reiniciar o fluxo). |
| Parâmetros | --- |