Stepper
Indicador de progresso em etapas — mostra os passos de um fluxo e o passo atual. O indicador do Wizard.
Componente base do Nuxt UI (
UStepper), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O Stepper é o indicador de progresso de um fluxo em etapas: mostra os passos, qual é o atual e quais já foram concluídos. É o indicador do Wizard — vive no topo do corpo (Main) da tela, não é um rail de documento (esse é o Phases).
Anatomia
| Parte | O que é |
|---|---|
| Bolinha (nó) | Ícone da etapa (ou número) num círculo. Concluídas + atual com preenchimento primary; futuras neutras. |
| Rótulo | Título da etapa sob a bolinha (descrição opcional abaixo). |
| Conector | Linha entre as bolinhas — primary até o passo atual, neutro depois. |
Quando usar
| Quero… | Use |
|---|---|
| Mostrar progresso de um fluxo de criação em etapas (cadastro, importação) | Stepper (dentro do Wizard) |
| Navegar entre fases de um documento de processo (rodadas de Cotação/Leilão) | Phases — rail de documento, não Stepper |
| Trocar de seção dentro do mesmo registro (Itens, Histórico) | Tabs |
Layout
- Horizontal (padrão no Wizard): ocupa a largura do corpo (fill) — a 1ª e a última bolinha ficam nas extremidades, com o rótulo centralizado sob cada bolinha (sem ultrapassar o padding da área) e conectores preenchendo o vão entre elas.
- Vertical: rail de etapas à lateral (quando a tela pedir).
- Tamanho sm por padrão; fixo ao rolar o conteúdo.
- É uma peça do Main — não depende da Nav-area do layout.
Estados
| Estado | Comportamento |
|---|---|
| Concluída | Bolinha preenchida (primary) + ícone — sinal redundante à cor. |
| Atual | Bolinha preenchida (primary); o corpo mostra o conteúdo desta etapa. |
| Futura | Bolinha neutra; conector neutro. |
| Clicável | Clicar num passo navega até ele (quando o fluxo permite passos não-lineares). |
No código
UStepper (Nuxt UI) — doc técnica em ui.nuxt.com/components/stepper. O estado do passo ativo é a mesma fonte que controla o conteúdo da etapa e os botões Voltar/Continuar (ver Wizard). No layout horizontal fill (bolinhas encostando nas bordas), o indicador é montado com as peças reais (ícone + tokens), já que o UStepper nativo centraliza as pontas.
Acessibilidade
- O passo atual é marcado com
aria-current="step". - Os estados (concluída / atual / futura) têm sinal redundante à cor (ícone/preenchimento), nunca só o tom.
- Teclado: passos alcançáveis e operáveis por teclado; foco visível; alvo clicável ≥ 44px.
- Os conectores são decorativos (
aria-hidden).