• Você está em:
  • Layout -
  • Barra de Steps

Barra de Steps

Toda página em que houver cadastro ou ações que demandem mais de uma etapa deve deixar claro ao usuário a quantidade de etapas pelas quais ele deve passar para concluir a tarefa. A solução adotada no cadastro de usuários na parte pública foi uma sequência de steps alinhado com uma barra de progresso.

As 12 colunas foram dividida em 5 partes da seguinte forma:

  • 1- Número + texto ocupando 2 colunas
  • 2- Barra de progresso transparente ocupando 3 colunas
  • 3- Número + texto ocupando 2 colunas
  • 4- Barra de progresso transparente ocupando 3 colunas
  • 5- Número + texto ocupando 2 colunas
Exemplo:

Código