Stepper CSS

O que é

Mostra em qual etapa de um fluxo o usuário está, com as anteriores marcadas como concluídas.

Como funciona

100% CSS — a linha conectando os passos é um ::after em cada item (exceto o último). Em .is-dn (concluído) o ✓ já vem sozinho via ::before — deixe .sw-stp-num VAZIO, não escreva ✓ nem ícone dentro.

Exemplos

<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">Confirmação</span></div>
</div>
<!-- .is-dn = concluído (número VAZIO, o ✓ verde vem do CSS) · .is-act = atual -->

<div sw-stp="v">
  <div class="sw-stp-it is-dn">
    <span class="sw-stp-num"></span>
    <div><div class="sw-stp-lbl">Conta criada</div><p class="t-pp t-mut">14 mar, 09:20</p></div>
  </div>
  <div class="sw-stp-it is-act">
    <span class="sw-stp-num">2</span>
    <div><div class="sw-stp-lbl">Verificar e-mail</div></div>
  </div>
</div>

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.