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