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

Wizard

Wizard

La componente Wizard è utile per demarcare gli step all’interno di un processo.

Il suo utilizzo e la sua applicazione variano a seconda del servizio e il suo design spesso è il frutto di una valutazione preliminare sulla natura del servizio.

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

Documentazione tecnica

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

Breaking change

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