Steps
Utilize o formato de steps para fluxos de criação com muitos campos, ou que exijam diferentes tipos de informação, diminuindo o nível de carga cognitiva do usuário:
- sem classe: Identifica para o usuário quantos passos ainda restam para terminar o processo;
.active
: Identifica a posição atual do usuário dentro do passo-a-passo;
.done
: Utilizado para identificar steps que já foram completamente preenchidos pelo usuário;
.danger
: Identifica para o usuário um passo que existe um alerta não crítico;
.danger
: Identifica para o usuário um passo que ocorreu um erro;
<div class="steps-indicator">
<ol>
<li class="done">
<span class="step-number"><i class="material-icons">check</i></span>
<p class="step-title">Informações</p>
</li>
<li class="danger">
<span class="step-number">2</span>
<p class="step-title">Endereço</p>
<small class="step-description">Campo inválido</small>
</li>
<li class="warning">
<span class="step-number">3</span>
<p class="step-title">Anexos</p>
<small class="step-description">Upload não concluído</small>
</li>
<li class="active">
<span class="step-number">4</span>
<p class="step-title">Documentos</p>
</li>
<li>
<span class="step-number">5</span>
<p class="step-title">Confirmação</p>
</li>
</ol>
</div>