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.

Non esiste un modo univoco di disegnare questa componente. 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.

Breaking feature dalla versione 2.1.0

Il componente è stato riscritto per ereditare pienamente il funzionamento del componente stepper.

  • per il wizard semplice vanno ora specificate le classi:
    it25-wizard e it25-wizard-pin (invece del solo it25-wizard)
  • per il wizard dettagliato va specificata la classe:
    it25-wizard (invece di it25-wizard-detail).

Wizard semplice

Un primo esempio di wizard può essere applicato in modali dove viene proposta una serie limitata di step progressivi al termine dei quali segue una call to action conclusiva.

Quello che caratterizza questa tipologia è la semplificazione degli elementi del wizard in sole icone.
In genere il wizard si trova tra il titolo e la parte di contenuto della componente.

  • 1
  • 2
  • 3
  • 4 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<div class="steppers">
  <div class="steppers-header it25-wizard it25-wizard-pin">
    <ul>
      <li class="confirmed" data-bs-toggle="tooltip" data-bs-placement="top" title="Pagamento">
        <svg class="icon icon-lg"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-calendar"></use></svg>
        <span class="visually-hidden">Confermato</span>
      </li>
      <li class="error" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="Optionals">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-list"></use></svg>
        <span class="visually-hidden">Attivo</span>
      </li>
      <li class="active" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="Tipologia alloggio">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
        <span class="visually-hidden">Attivo</span>
      </li>
      <li data-bs-toggle="tooltip" data-bs-placement="bottom" title="Pagamento">
        <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-card"></use></svg>
      </li>
    </ul>
    <span class="steppers-index" aria-hidden="true">3/6</span>
  </div>
</div>


<div class="steppers">
  <div class="steppers-header it25-wizard it25-wizard-pin">
    <ul>
      <li class="confirmed" data-bs-toggle="tooltip" data-bs-placement="top" title="Pagamento">
        1
        <span class="visually-hidden">Confermato</span>
      </li>
      <li class="error" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="Optionals">
        2
        <span class="visually-hidden">Attivo</span>
      </li>
      <li class="active" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="Tipologia alloggio">
        3
        <span class="visually-hidden">Attivo</span>
      </li>
      <li class="text-center" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Pagamento">
        4
      </li>
    </ul>
    <span class="steppers-index" aria-hidden="true">3/6</span>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function () {
      $('[data-bs-toggle="tooltip"]').tooltip()
    });
  })    
</script>

Wizard dettagliato

La seconda tipologia di Wizard consiste in una pagina dedicata dove l’utente necessita di svolgere un task per fasi progressive.
Questo si traduce in una versione di Wizard più dettagliata, ricca di elementi e contenuti testuali e quindi di maggiori interazioni per step.

  • 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" 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 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">2/6</span>
  </div>
</div>

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>