Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Stepper

Stepper

Il componente è utile per demarcare i passi da eseguire all’interno di un processo.

  • Scelta periodo
  • Tipologia alloggio
  • Optionals 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="steppers">
  <div class="steppers-header it25-wizard">
    <ul>
      <li class="confirmed not-first" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
        title="<strong>Descrizione dello step</strong>:<br/>spiegare per esteso le operazioni da compiere.">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-calendar"></use></svg>
        Scelta periodo
        <span class="visually-hidden">Confermato</span>
      </li>
      <li class="active" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
        title="<strong>Descrizione dello step</strong>:<br/>spiegare per esteso le operazioni da compiere.">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
        Tipologia alloggio
        <span class="visually-hidden">Attivo</span>
      </li>
      <li class="warning not-last" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
        title="<strong>Descrizione dello step</strong>:<br/>spiegare per esteso le operazioni da compiere.">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-list"></use></svg>
        Optionals
      </li>
    </ul>
    <span class="steppers-index" aria-hidden="true">3/6</span>
  </div>
</div>

Si notino le classi: not-first e not-last: applicano un margine rispettivamente a sinistra e a destra dello step in modo che la riga sottostante suggerisca che vi sono passi precedenti/successivi.

Per i non vedenti l’informazione è invece fornita dallo stepper-index non visualizzato ma letto dagli screen reader.

Abilitazione

Per abilitare il funzionamento dei tooltip dell’esempio, è stato inserito nella pagina il seguente codice:

<script>
  document.addEventListener("DOMContentLoaded", function() { 
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  })    
</script>

Specifiche Tecniche

Questo componente è costruito sull a base del componente di Bootstrap Italia:
Steppers

Breaking change

Eliminato il Wizard semplice: obsoleto rispetto al nuovo Design System.