Wizard
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Horizontal
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Vertical
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| 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 |
|---|---|
"cancel-button" | Conteúdo customizado do botão de cancelar. Quando utilizado, o texto padrão "Cancelar" é substituído. |
"default" | Slot para os painéis de etapa (br-wizard-panel) do wizard. |
"next-button" | Conteúdo customizado do botão de avançar/concluir. Quando utilizado, os textos padrão "Avançar" e "Concluir" são substituídos. |
"previous-button" | Conteúdo customizado do botão de voltar. Quando utilizado, o texto padrão "Voltar" é substituído. |
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 | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"buttons" | Área de botões de navegação. |
"content" | Conteúdo do painel ativo. |
"form" | Área do formulário do wizard. |
"panel" | Painel ativo do wizard. |
"progress" | Área de progresso do wizard. |