Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Steppers

Steppers

Gli “Stepper” mostrano l’avanzamento del progresso di una procedura a più passi attraverso la numerazione dei passi 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>.

Breaking feature dalla versione 2.3.0

L’elemento con classe .steppers-index adesso è diventato uno <span> collocato fuori dalla lista <ul>.

L’aspetto della modalità mobile degli Steppers è differente rispetto a quello desktop. Se si sta consultando questa documentazione su un PC desktop, per visualizzare correttamente gli esempi seguenti in formato mobile sarà necessario ridimensionare la finestra del browser al di sotto dei 992 pixel.

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 la finestra del browser per apprezzare il comportamente degli Stepper su dispositivi di dimensioni ridotte.

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
1
2
3
4
5
6
7
8
9
10

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success"><use href="/dist/svg/sprites.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>

Testo e icone

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

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
1
2
3
4
5
6
7
8
9
10

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><svg class="icon"><use href="/dist/svg/sprites.svg#it-calendar"></use></svg>Primo contenuto <svg class="icon steppers-success"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active"><svg class="icon"><use href="/dist/svg/sprites.svg#it-lock"></use></svg>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><svg class="icon"><use href="/dist/svg/sprites.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 azzurro, in questo caso ridondante.

  • Primo contenuto
  • 2Secondo contenuto
  • 3Terzo contenuto
1
2
3
4
5
6
7
8
9
10

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success"><use href="/dist/svg/sprites.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>

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.

Accessibilità

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.

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

Contenuto di esempio dello step corrente

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

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success"><use href="/dist/svg/sprites.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/sprites.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/sprites.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>

Varianti navigazione per mobile

La versione mobile degli Steppers non visualizza l’elenco completo degli step disponibili, ma solo quello corrente. Per questa ragione è possibile aggiungere degli indicatori di progresso allo .steppers-nav.

Questi indicatori saranno visualizzati solo su mobile, ma nei seguenti esempi sono stati resi disponibili anche nella visualizzazione desktop. Si raccomanda comunque la visualizzazione in un viewport ridotto per ottenere un esempio realistico dell’aspetto finale.

Progress bar

La Progress bar è quella nativa di Bootstrap 5 ed è contenuta in un elemento .steppers-progress situato fra i pulsanti “Indietro” ed “Avanti”.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<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/sprites.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/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pallini

I pallini sono elementi <li> contenuti in una lista .steppers-dots situato fra i pulsanti “Indietro” e “Avanti”.

Per ragioni di accessibilità, i <li> devono contenere uno <span> con classe .visually-hidden riservato agli screen reader con un testo indicante il numero di step e lo stato.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <ul class="steppers-dots">
      <li class="done"><span class="visually-hidden">Step 1 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 2 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 3 di 6 - Confermato</span></li>
      <li><span class="visually-hidden">Step 4 di 6</span></li>
      <li><span class="visually-hidden">Step 5 di 6</span></li>
      <li><span class="visually-hidden">Step 6 di 6</span></li>
    </ul>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pulsante Salva

Su dispositivi mobili è possibile inserire un terzo pulsante “Salva” di aspetto differente con classe .steppers-btn-save fra i pulsanti “Indietro” e “Avanti”.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12

<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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-primary btn-sm steppers-btn-save">Salva</button>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pulsante conferma

Su dispositivi mobili è possibile sostituire il pulsante “Avanti” con un pulsante “Conferma” di stile differente, con la classe .steppers-btn-confirm.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11

<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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-primary btn-sm steppers-btn-confirm">Conferma</button>
  </nav>
</div>

Versione su sfondo scuro

Per ottenere una versione scura degli Stepper è sufficiente aggiungere la classe .bg-dark al contenitore principale.

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

Contenuto di esempio dello step corrente

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

<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success"><use href="/dist/svg/sprites.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/sprites.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/sprites.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>

Varianti intestazione

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
  • Primo contenuto
  • 2Secondo contenuto
  • 3Terzo contenuto
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

<!-- Solo testo -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success"><use href="/dist/svg/sprites.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>

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

<!-- Numeri -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato Step 1</span></span>Primo contenuto</li>
      <li class="active no-line"><span class="steppers-number"><span class="visually-hidden">Attivo Step </span>2</span>Secondo contenuto</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>

Varianti navigazione per mobile

Si raccomanda la visualizzazione in un viewport ridotto per ottenere un esempio realistico dell’aspetto finale.

Progress bar

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="steppers bg-dark 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/sprites.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/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pallini

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="steppers bg-dark 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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <ul class="steppers-dots">
      <li class="done"><span class="visually-hidden">Step 1 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 2 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 3 di 6 - Confermato</span></li>
      <li><span class="visually-hidden">Step 4 di 6</span></li>
      <li><span class="visually-hidden">Step 5 di 6</span></li>
      <li><span class="visually-hidden">Step 6 di 6</span></li>
    </ul>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pulsante Salva

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12

<div class="steppers bg-dark 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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-primary btn-sm steppers-btn-save">Salva</button>
    <button type="button" class="btn btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pulsante conferma

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11

<div class="steppers bg-dark 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/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-primary btn-sm steppers-btn-confirm">Conferma</button>
  </nav>
</div>