Steps - Componentes - Sirius Design System

Sobre Steps

Use para guiar e informar o andamento de uma jornada que seja linear, e que seja iniciada e avançada pelo usuário.

Como usar

Perguntas e respostas
2

Validação de respostas
3

Pronto!

<ul class="steps">
  <li class="step-item is-completed">
    <a href="#">
      <div class="step-marker">
        <span class="icon">
          <i class="far fa-check"></i>
        </span>
      </div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Perguntas e respostas</p>
    </div>
  </li>
  <li class="step-item is-active">
    <a href="#">
      <div class="step-marker">2</div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Validação de respostas</p>
    </div>
  </li>
  <li class="step-item">
    <a href="#">
      <div class="step-marker">3</div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Pronto!</p>
    </div>
  </li>
</ul>

Com conteúdo e botões de controle

Credencial
2

Mensagem
3

Validação

<ul class="steps">
  <li class="step-item is-completed">
    <a href="#">
      <div class="step-marker">
        <span class="icon">
          <p class="far fa-check"></i>
        </span>
      </div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Credencial</p>
    </div>
  </li>
  <li class="step-item is-active">
    <a href="#">
      <div class="step-marker">2</div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Mensagem</p>
    </div>
  </li>
  <li class="step-item">
    <a href="#">
      <div class="step-marker">3</div>
    </a>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Validação</p>
    </div>
  </li>
</ul>
<div class="box">
  <form>
    <div class="field">
      <label class="label">Seu número</label>
      <p class="control">
        <input class="input" disabled value="+5551999887700">
      </p>
      <p class="help">Esse é o número que foi configurado no momento da criação da conta, não é possível alterá-lo.</p>
    </div>

    <div class="field">
      <label class="label">Número</label>
      <p class="control">
        <input class="input" value="+5551999000000">
      </p>
    </div>

    <div class="field">
      <label class="label">Mensagem</label>
      <p class="control">
        <textarea class="textarea" placeholder="Escreva a mensagem a ser enviada..."></textarea>
      </p>
    </div>
  </form>
</div>
<div class="buttons is-right">
  <button class="button">Cancelar</button>
  <button class="button is-primary">Salvar e avançar</button>
</div>

Seção vertical

<ul class="steps is-vertical">
  <li class="step-item is-completed">
    <a href="#">
      <div class="step-marker">1</div>
    </a>
  </li>
  <li class="step-item is-active">
    <a href="#">
      <div class="step-marker">2</div>
    </a>
  </li>
  <li class="step-item">
    <a href="#">
      <div class="step-marker">3</div>
    </a>
  </li>
</ul>

Diretrizes de design

Do's

Use para fluxos com no mínimo dois passos
Se usar Steps para separar campos de formulário, agrupe os campos por domínio
Se não há uma tela para direcionar o usuários ao final do processo, considere um último step sendo uma tela de sucesso
Se o fluxo afeta uma mudança no andamento do sistema ou envolve gasto financeiro, o último passo deve ser usado para resumir as informações e informar o que ocorrerá após confirmação e conclusão
Use os Steps verticais se estiver usando dentro de um Modal

Dont's

Não é permitido que a movimentação de step seja iniciada pelo sistema
Não deixe para informar erros de preenchimento no final do processo, indique no momento em que ele ocorre
Não use para processos não lineares, ou seja, que a quantidade ou ordem dos passos possam mudar de acordo com o preenchimento de campos nos passos anteriores

Lista de modificadores

Modificador	Descrição
`.steps`	Define que o elemento é uma lista de passos