OktoStrap

OktoStrap

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;
  1. check

    Informações

  2. 2

    Endereço

    Campo inválido
  3. 3

    Anexos

    Upload não concluído
  4. 4

    Documentos

  5. 5

    Confirmação

<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>