Unito.it

Tema Unito v2

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

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

  • Label Step 1 Confermato
  • Label Step 2 Attivo
  • Label Step 3
<div class="steppers">
                <ul class="steppers-header">
                    <li class="confirmed"><svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-calendar"></use></svg>Label Step 1 <svg class="icon steppers-success"><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg><span class="sr-only">Confermato</span></li>
                    <li class="active"><svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-lock"></use></svg>Label Step 2 <span class="sr-only">Attivo</span></li>
                    <li><svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-settings"></use></svg>Label Step 3</li>
                    <li class="steppers-index" aria-hidden="true">2/6</li>
                </ul>
            </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.

  • ConfermatoLabel Step 1
  • Step 2Label Step 2 Attivo
  • Step 3Label Step 3
<div class="steppers">
                <ul class="steppers-header">
                    <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success"><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg><span class="sr-only">Confermato</span></span>Label Step 1</li>
                    <li class="active no-line"><span class="steppers-number"><span class="sr-only">Step </span>2</span>Label Step 2 <span class="sr-only">Attivo</span></li>
                    <li><span class="steppers-number"><span class="sr-only">Step </span>3</span>Label Step 3</li>
                    <li class="steppers-index" aria-hidden="true"><span>1</span> <span class="active">2</span> <span>3</span> <span>4</span></li>
                </ul>
            </div>

Il passaggio da uno step all’altro attraverso i bottoni contenuti in .steppers-nav determina un cambiamento del contenuto presente in .steppers-content. Il contenitore .steppers-content ha un attributo ARIA aria-live="polite" per avvisare gli utilizzatori di screen reader dall’avvenuto cambiamento del contenuto.

I bottoni “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.

  • Label Step 1 Confermato
  • Label Step 2 Attivo
  • Label Step 3

Contenuto di esempio dello step corrente

<div class="steppers">
            <ul class="steppers-header">
                <li class="confirmed">Label Step 1 <svg class="icon steppers-success"><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg><span class="sr-only">Confermato</span></li>
                <li class="active">Label Step 2 <span class="sr-only">Attivo</span></li>
                <li>Label Step 3</li>
                <li class="steppers-index" aria-hidden="true">2/6</li>
            </ul>
            <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 xlink: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 xlink: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>

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 4 ed è contenuta in un elemento .steppers-progress situato fra i bottoni “Indietro” ed “Avanti”.

Contenuto di esempio dello step corrente

<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 xlink: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 xlink:href="./dist/svg/sprite.svg#it-chevron-right"></use></svg></button>
            </nav>
        </div>
Torna su