Stepper

Mostra l’avanzamento di una procedura a più step, attraverso la numerazione degli step stessi

Intestazione

Il contenitore degli Stepper ha sempre una classe .steppers. La sua intestazione è contenuta in una lista <ul> all’interno della quale i singoli passi (o step) sono rappresentati da elementi <li>.

Varianti intestazione

Solo testo

I passi visibili nell’intestazione possono essere corredati da tre classi aggiuntive:

• .confirmed per individuare uno step già confermato. È bene corredare tali step con un’icona che ne identifichi il completamento (vedi di seguito).
• .active per individuare lo step attualmente attivo; su dispositivi mobili è l’unico visualizzato.
• .steppers-index per individuare un indice, visibile solo su mobile, che può contenere lo stato attuale di progresso indicato in forma testuale

È necessario ridurre finestra del browser per apprezzare il comportamente degli Stepper su dispositivi a dimensioni ridotte.

Testo e icone

Le label presenti negli step dell’intestazione possono essere anticipate da un’icona.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><svg class="icon"><use href="./dist/svg/sprite.svg#it-calendar"></use></svg>Primo contenuto <svg class="icon steppers-success"><use href="./dist/svg/sprite.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active"><svg class="icon"><use href="./dist/svg/sprite.svg#it-lock"></use></svg>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><svg class="icon"><use href="./dist/svg/sprite.svg#it-settings"></use></svg>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

Ordine degli step

Le label presenti negli steps dell’header possono essere anticipate dal numero ordinale relativo allo stesso. Come mostrato nell’esempio, nel caso di uno step completato al posto del numero va inclusa un’icona di conferma con un testo riservato agli screen reader.

È necessario aggiungere la classe .no-line al <li> attivo per nascondere il bordo inferiore, in questo caso ridondante.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success"><use href="./dist/svg/sprite.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></span>Primo contenuto</li>
      <li class="active no-line"><span class="steppers-number"><span class="visually-hidden">Step </span>2</span>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><span class="steppers-number"><span class="visually-hidden">Step </span>3</span>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true"><span>1</span> <span class="active">2</span> <span>3</span> <span>4</span></span>
  </div>
</div>

Navigazione degli step

I pulsanti “Avanti” e “Indietro” dovranno essere utilizzati per implementare la logica di navigazione degli Steppers nelle web app e sono dotati di classi .steppers-btn-prev e .steppers-btn-next.

Il passaggio da uno step all’altro attraverso i pulsanti contenuti in .steppers-nav determina un cambiamento del contenuto presente in .steppers-content.

Nel caso si stia sviluppando una Single page application oppure una sequenza di step in AJAX il contenitore .steppers-content dovrebbe avere un attributo ARIA aria-live="polite" per avvisare gli utilizzatori di screen reader dall’avvenuto cambiamento del contenuto.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success"><use href="./dist/svg/sprite.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-primary"><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg></button>
    <button type="button" class="btn btn-primary btn-sm steppers-btn-confirm d-none d-lg-block">Conferma</button>
  </nav>

<div class="steppers mobile-examples">
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-primary"><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>Indietro</button>
    <div class="steppers-progress">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>