Wizard
Template de fluxo guiado em etapas — indicador de progresso, conteúdo da etapa e rodapé Voltar/Avançar.
Fluxo guiado em etapas, para uma tarefa que é grande demais para uma tela só (cadastrar fornecedor, importar planilha, criar cotação). Conduz a pessoa passo a passo, validando cada etapa antes de avançar. Usa o chassi do ME (header + subheader); os campos de cada etapa vêm de Componentes › Formulários.
Quando usar
- Uma tarefa longa e sequencial que se beneficia de ser quebrada em passos.
- Quando cada passo precisa validar antes do próximo, e a ordem importa.
- Onboarding / criação assistida (ex.: novo fornecedor em 5 passos).
Quando NÃO usar:
| Cenário | Use |
|---|---|
| Criar/editar um registro num único formulário | Formulário — não wizard |
| Navegar entre fases de um documento de processo (rodadas de Cotação/Leilão) | Phases — é rail de documento, não wizard |
| Trocar de seção dentro do mesmo registro (Itens, Histórico) | Tabs |
Anatomia
Chassi do ME (header azul + subheader) com o corpo dividido em:
- Subheader do fluxo — título + "Passo X de N" à esquerda; Voltar / Continuar à direita (Voltar
neutral outline· Continuar/Concluirprimary solid). - Indicador de progresso (stepper) — no topo do corpo (Main), mostra as etapas e a atual. Reflete o estado: concluída · atual · futura, com sinal redundante à cor (ícone/preenchimento, não só cor). É clicável (navega direto ao passo). Fica fixo ao rolar o conteúdo.
- Conteúdo da etapa atual — só o passo ativo é exibido; o corpo troca conforme a navegação (o stepper e o conteúdo ficam sempre em sincronia).
Stepper — layout
- Horizontal, ocupando a largura do corpo (fill): a 1ª e a última bolinha ficam nos extremos e os conectores preenchem o vão entre elas; rótulo centralizado sob cada bolinha, sem ultrapassar o padding da área.
- Tamanho sm por padrão; bolinha com o ícone da etapa + rótulo (e descrição opcional).
- Concluídas + atual com preenchimento primário; futuras neutras.
Tipos de conteúdo por etapa
Cada etapa tem um tipo de conteúdo — combine conforme a tarefa. Exemplo do modelo padrão (4 passos):
| Passo | Tipo | Como é montado |
|---|---|---|
| Dados | Formulário | Campos reais em FormField (Select "carregar modelo", Nome/Categoria, Descrição). |
| Itens | Lista em cards | Um Card por item (número · tipo · solicitante · valor), 2 por linha. |
| Revisão | Resumo | Campos em FormField com o valor exibido na altura de um input (rótulo + valor, sem edição). |
| Confirmação | Estado final | Ícone de sucesso + título + descrição ("Tudo pronto para enviar"). |
Regras
- Valide a etapa antes de avançar — não deixe seguir com pendências do passo atual.
- "Concluir" no último passo, não "Continuar" — deixa claro que ali termina (o botão de avanço troca o rótulo e a ação no último passo).
- O stepper reflete a etapa ativa e o corpo mostra o conteúdo dela (sempre em sincronia); clicar num passo navega até ele.
- Permita voltar sem perder o que já foi preenchido.
- Sinal redundante à cor no estado do passo (não comunique só por cor).
Responsivo
- Desktop: stepper na horizontal, fixo no topo do corpo; ações (Voltar/Continuar) no subheader.
- Mobile/tablet: o stepper compacta em "Passo X de N" textual; os campos empilham; as ações vão para um rodapé fixo (Voltar/Avançar acessíveis com o polegar).
Componentes da tela
Priorize o EletroDS; Nuxt UI é fallback.
| Zona | Componente | Papel |
|---|---|---|
| Título + progresso + ações | Subheader | Título do fluxo + "Passo X de N" + Voltar/Continuar. |
| Indicador de passos | Stepper (Nuxt UI UStepper) | Mostra as etapas e a atual; horizontal, fixo no topo do corpo. |
| Ações do rodapé | Button bar | Voltar (neutral outline) + Continuar/Concluir (primary solid). |
| Etapa: formulário | Componentes › Formulários | Input, Select, FormField na etapa de coleta. |
| Etapa: itens | Card | Um card por item (número/tipo/solicitante/valor). |
| Etapa: confirmação | Ícone + textos | Estado de sucesso ("Tudo pronto para enviar"). |
Como montar (Compositor)
No Prompt Builder, o Wizard é montado por áreas → colunas → peças, igual ao Formulário:
- O stepper é uma peça do Main (bloco
UStepper), editável no configurador: passos (título/ícone/descrição, adicionar/remover/reordenar), cor, tamanho. Ele não depende da Nav-area — aparece no corpo mesmo com a zona Nav desligada. - Cada passo é um grupo que aparece conforme o passo ativo; monte o conteúdo dele com componentes reais.
- Detalhes de construção no repo:
docs/formulario-wizard-real-preview.md.