Stepper

Lo stepper viene utilizzato per mostrare le varie fasi che portano al compimento di un’operazione.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per gli stepper nell’Ecosistema digitale Turismo Cultura.

STEP 1 - Lorem ipsum dolor sit amet

Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.

Non condivideremo mai la tua e-mail con nessun altro.
Inserire una password tra gli 8 e i 20 caratteri.
Inserire una password tra gli 8 e i 20 caratteri.

STEP 2 - Lorem ipsum dolor sit amet

Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.

STEP 3 - Lorem ipsum dolor sit amet

Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.

STEP 4 - Lorem ipsum dolor sit amet

Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.


                                            
<div class="dms-stepper">
    <div class="container">
        <ul class="nav nav-pills nav-fill" role="tablist">
            <li class="nav-item active" role="presentation">
                <a class="nav-link" href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-1" role="tab" title="Step 1" aria-expanded="true">
                    <span class="circle">1</span>
                    <span class="label d-none d-lg-block">Step 1</span>      
                </a>
            </li> 
            <li class="nav-item disabled" role="presentation">
                <a class="nav-link" href="#stepper-step-2" tabindex="-1" aria-disabled="true" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2">
                    <span class="circle">2</span>
                    <span class="label d-none d-lg-block">Step 2</span>      
                </a>
            </li>
            <li class="nav-item disabled" role="presentation">
                <a class="nav-link" href="#stepper-step-3" tabindex="-1" aria-disabled="true" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Step 3">
                    <span class="circle">3</span>
                    <span class="label d-none d-lg-block">Step 3</span>      
                </a>
            </li>
            <li class="nav-item disabled" role="presentation">
                <a class="nav-link" href="#stepper-step-4" tabindex="-1" aria-disabled="true" data-toggle="tab" aria-controls="stepper-step-4" role="tab" title="Step 4">
                    <span class="circle">4</span>
                    <span class="label d-none d-lg-block">Step 4</span>      
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="stepper-step-1" role="tabpanel" aria-labelledby="stepper-step-1">
                <div class="tab-content--header text-center">
                    <h3>STEP 1 - Lorem ipsum dolor sit amet</h3>
                    <p>Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.</p>
                </div>
                
                <form role="form" class="dms-form">
                    <div class="form-row">
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="inputExample1">Nome<sup>*</sup></label>
                            <input type="text" class="form-control dms-form--input"
                                id="inputExample1" placeholder="Nome">
                        </div>
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="inputExample1">Cognome<sup>*</sup></label>
                            <input type="text" class="form-control dms-form--input"
                                id="inputExample1" placeholder="Cognome">
                        </div>
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="example-select">Città
                            <div class="dms-form--select-wrapper">
                                <select title="Seleziona" data-width="100%" data-live-search="true" data-size="5" class="form-control selectpicker"
                                            id="example-city-select">
                                    <option class="placeholder-option" value="">Seleziona</option>
                                    <option value="1">Bari</option>
                                    <option value="2">Brindisi</option>
                                    <option value="3">Foggia</option>
                                    <option value="4">Lecce</option>
                                    <option value="5">Mopoli</option>
                                    <option value="6">Taranto</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="exampleInputEmail1">Email<sup>*</sup></label>
                            <input type="email" class="form-control dms-form--input"
                                id="exampleInputEmail1" aria-describedby="emailHelp"
                                placeholder="Inserisci">
                            <small id="emailHelp" class="form-text text-muted">Non condivideremo mai
                                la tua e-mail con nessun altro.</small>
                        </div>
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="inputPassword">Password<sup>*</sup></label>
                            <input type="password" id="inputPassword"
                                class="form-control dms-form--input"
                                placeholder="Inserisci"
                                aria-describedby="passwordHelpInline" minlength="8" maxlength="20">
                            <small id="passwordHelpInline" class="text-muted">
                                Inserire una password tra gli 8 e i 20 caratteri.
                            </small>
                        </div>
                        <div class="form-group col-md-6 col-lg-4">
                            <label for="inputPassword">Ripeti password<sup>*</sup></label>
                            <input type="password" id="inputPassword"
                                class="form-control dms-form--input"
                                placeholder="Inserisci"
                                aria-describedby="passwordHelpInline" minlength="8" maxlength="20">
                            <small id="passwordHelpInline" class="text-muted">
                                Inserire una password tra gli 8 e i 20 caratteri.
                            </small>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-12">
                            <label for="exampleTextarea">Note</label>
                            <textarea class="form-control dms-form--textarea" id="exampleTextarea"
                                placeholder="Inserisci un testo" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="form-row"> 
                        <div class="col-md-6">
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="customCheck33">
                                <label class="custom-control-label" for="customCheck33">Acconsenti al trattamento dei dati personali</label>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="dms-stepper--footer d-lg-flex justify-content-lg-end">
                    <div class="right-btns">
                        <a href="javascript:void(0)" class="btn dms-btn dms-btn--secondary" title="Annulla" type="button">Annulla</a>
                        <a href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Avanti" class="btn dms-btn dms-btn--primary ml-auto next-step" type="button">Avanti</a>
                    </div>                                        
                </div>
            </div>

            <div class="tab-pane fade" id="stepper-step-2" role="tabpanel" aria-labelledby="stepper-step-2">
                <div class="tab-content--header text-center">
                    <h3>STEP 2 - Lorem ipsum dolor sit amet</h3>
                    <p>Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.</p>
                </div>

                <div class="dms-stepper--footer d-lg-flex justify-content-lg-between">
                    <div class="left-btns">
                        <a href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-1" role="tab" class="btn dms-btn dms-btn--secondary mr-3 prev-step" title="Torna indietro" type="button">Torna indietro</a>
                    </div>
                    <div class="right-btns">
                        <a href="#" class="btn dms-btn dms-btn--secondary" title="Annulla" type="button">Annulla</a>
                        <a href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Avanti" class="btn dms-btn dms-btn--primary ml-auto next-step" type="button">Avanti</a>
                    </div>                                        
                </div>
            </div>

            <div class="tab-pane fade" id="stepper-step-3" role="tabpanel" aria-labelledby="stepper-step-3">
                <div class="tab-content--header text-center">
                    <h3>STEP 3 - Lorem ipsum dolor sit amet</h3>
                    <p>Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.</p>
                </div>
                <div class="dms-stepper--footer d-lg-flex justify-content-lg-between">
                    <div class="left-btns">
                        <a href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" class="btn dms-btn dms-btn--secondary mr-3 prev-step" title="Torna indietro" type="button">Torna indietro</a>
                    </div>
                    <div class="right-btns">
                        <a href="#" class="btn dms-btn dms-btn--secondary" title="Annulla" type="button">Annulla</a>
                        <a href="#stepper-step-4" data-toggle="tab" aria-controls="stepper-step-4" role="tab" title="Avanti" class="btn dms-btn dms-btn--primary ml-auto next-step" type="button">Avanti</a>
                    </div>                                        
                </div>
            </div>

            <div class="tab-pane fade" id="stepper-step-4" role="tabpanel" aria-labelledby="stepper-step-4">
                <div class="tab-content--header text-center">
                    <h3>STEP 4 -  Lorem ipsum dolor sit amet</h3>
                    <p>Exercitationem augue assumenda autem provident hymenaeos, hendrerit, dolores class repellendus, cumque morbi, mollit facere tempus, magnam iste quas, auctor wisi pellentesque.</p>
                </div>
                <div class="dms-stepper--footer d-lg-flex justify-content-lg-between">
                    <div class="left-btns">
                        <a href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" class="btn dms-btn dms-btn--secondary mr-3 prev-step" title="Torna indietro" type="button">Torna indietro</a>
                    </div>
                    <div class="right-btns">
                        <a href="#" class="btn dms-btn dms-btn--secondary" title="Annulla" type="button">Annulla</a>
                        <a data-toggle="modal" data-target="#mySuccessModal" href="javascript:void(0)" title="Conferma" class="btn dms-btn dms-btn--primary confirm-step ml-auto" type="button">Conferma</a>
                    </div>   
                </div>
            </div>
        </div>
        
    </div>
</div>

Utilizzo

Il funzionamento di questo componente avviene tramite una funzione Javascript, presente all'interno del file dms-script.js che è possibile modificare e personalizzare.

Inoltre, è fondamentale rispettare il markup per avere una corretta visualizzazione grafica del componente (vedi snippet). Nel caso di form presenti all'interno di uno o più step, si consiglia di consultare la pagina Form.