Stepper CSS

O que é

É a barrinha de etapas que aparece no checkout de loja, no cadastro em várias telas ou no agendamento ("1. Serviço · 2. Horário · 3. Seus dados"). Ela responde à pergunta "quanto falta?". Você coloca sw-stp na caixa de fora e um bloco class="sw-stp-it" para cada etapa, com o número (sw-stp-num) e o nome (sw-stp-lbl). Cada etapa pode estar feita (is-dn, verde com ✓), atual (is-act, na cor primária) ou a fazer (sem classe, cinza).

É só CSS — não precisa de JavaScript. As linhas que ligam uma etapa à outra são desenhadas sozinhas, e ficam verdes depois de uma etapa feita. O ✓ da etapa feita também vem sozinho: deixe o número vazio nela. Quem troca as classes quando a pessoa avança é o seu código (ou a página seguinte já vem com a etapa certa marcada).

Quando usar

• Checkout de loja: Carrinho → Entrega → Pagamento → Confirmação.
• Cadastro ou orçamento longo dividido em telas: mostra que falta pouco e a pessoa não desiste.
• Agendamento (serviço, dia, horário, dados): em pé (sw-stp="v") numa coluna ao lado do formulário.
• Andamento de um processo no painel (proposta enviada, aprovada, em produção), com uma linha de texto embaixo de cada etapa: em pé.
• Para uma lista de acontecimentos com data e hora (rastreio, histórico), use a Timeline.

Comece aqui

1. 1

   Coloque o SW Core no <head> da página (uma vez só). O stepper só precisa do CSS principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escreva uma etapa por bloco. A feita leva is-dn (com o número vazio), a atual leva is-act, as outras ficam sem classe.

   Carrinho

   2Pagamento

   3Pronto

   <div sw-stp>
     <div class="sw-stp-it is-dn"><span class="sw-stp-num"></span><span class="sw-stp-lbl">Carrinho</span></div>
     <div class="sw-stp-it is-act"><span class="sw-stp-num">2</span><span class="sw-stp-lbl">Pagamento</span></div>
     <div class="sw-stp-it"><span class="sw-stp-num">3</span><span class="sw-stp-lbl">Pronto</span></div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<!-- na página "Entrega": Carrinho feito, Entrega atual -->
<div sw-stp>
  <div class="sw-stp-it is-dn"><span class="sw-stp-num"></span><span class="sw-stp-lbl">Carrinho</span></div>
  <div class="sw-stp-it is-act"><span class="sw-stp-num">2</span><span class="sw-stp-lbl">Entrega</span></div>
  <div class="sw-stp-it"><span class="sw-stp-num">3</span><span class="sw-stp-lbl">Pagamento</span></div>
</div>

<div sw-stp id="etapas">
  <div class="sw-stp-it is-act"><span class="sw-stp-num">1</span><span class="sw-stp-lbl">Seus dados</span></div>
  <div class="sw-stp-it"><span class="sw-stp-num">2</span><span class="sw-stp-lbl">Endereço</span></div>
  <div class="sw-stp-it"><span class="sw-stp-num">3</span><span class="sw-stp-lbl">Revisão</span></div>
</div>
<button sw-btn="pri" id="avancar">Avançar</button>

<script>
  document.getElementById('avancar').addEventListener('click', () => {
    const etapas = [...document.querySelectorAll('#etapas .sw-stp-it')];
    const i = etapas.findIndex((e) => e.classList.contains('is-act'));
    if (i < 0) return;
    etapas[i].classList.replace('is-act', 'is-dn');          // atual vira feita
    etapas[i].querySelector('.sw-stp-num').textContent = ''; // número some, entra o ✓
    etapas[i + 1]?.classList.add('is-act');                  // próxima vira atual
  });
</script>

<div class="l l-2">
  <div sw-stp="v">
    <div class="sw-stp-it is-dn">
      <span class="sw-stp-num"></span>
      <div><div class="sw-stp-lbl">Serviço</div><small>Corte + barba</small></div>
    </div>
    <div class="sw-stp-it is-act">
      <span class="sw-stp-num">2</span>
      <div><div class="sw-stp-lbl">Dia e horário</div></div>
    </div>
    <div class="sw-stp-it">
      <span class="sw-stp-num">3</span>
      <div><div class="sw-stp-lbl">Seus dados</div></div>
    </div>
  </div>
  <div sw-fld>
    <label for="dia">Escolha o dia</label>
    <input sw-inp id="dia" type="date">
  </div>
</div>

Precisa de quê

• swcore.min.css — o stepper.

Cuidados — erros comuns

• Na etapa feita (is-dn) deixe <span class="sw-stp-num"></span> vazio. Se escrever o número ou um ✓ lá dentro, aparece "✓1" ou "✓✓".
• Só uma etapa deve ter is-act de cada vez.
• No stepper deitado, nomes longos quebram em duas linhas e ficam apertados no celular. Use nomes de uma ou duas palavras, ou use o em pé (v).
• No em pé com explicação, o nome e o texto precisam estar juntos numa <div>; soltos, eles ficam lado a lado com o número.

O que ele não faz

• Não avança sozinho nem controla o formulário: trocar is-act / is-dn é tarefa do seu código ou da página.
• Não tem estado de erro (etapa vermelha) nem outras cores: feita é verde, atual é a cor primária.
• As etapas não são clicáveis por padrão. Se quiser voltar para uma etapa feita, coloque um link <a> no nome.