L'objet o-steps affiche les étapes et représente l'étape courante, les étapes passées et à suivre
Le o-nav-split permet quant à lui de changer d'étape. La partie gauche se cache sous mobile, et un bouton retour est à afficher en haut à gauche de la page à l'aide de la classe utilitaire u-showOnMobile ou u-showOnTablet.
Pour la nouvelle version des Step
.js requis :
<div class="o-study-type-holder">Contrôle de compactage</div>
<div class="o-head--sticky">
<div class="o-breadcrumb"><a class="c-breadcrumb__item" href="/ws/">Accueil</a><a class="c-breadcrumb__item" href="/minesprint/">MineSprint</a><a class="c-breadcrumb__item" href=" /minesprint/study/9992/investigation/probings ">
Reconnaissance de sol
: Zone de tests - DBM -</a>
<div class="c-breadcrumb__item">Rapports</div>
</div>
<div class="o-head--steps"><a class="o-nav-step" href="/">
<div class="o-nav-step-icon c-fonticon__icon-chevron-left"></div><span>Retour</span></a>
<div class="o-steps-wrapper js-step">
<div class="o-steps">
<div class="c-step__item"> Sondages</div>
<div class="c-step__item">Remblais</div>
<div class="c-step__item"> Anomalies</div>
<div class="c-step__item active"> Rapports</div>
</div>
</div><a class="o-nav-step" href="/"> <span>Suivant</span>
<div class="o-nav-step-icon c-fonticon__icon-chevron-right"></div></a>
</div>
</div>
<div class="o-steps">
<div class="c-step__item"> Sondages</div>
<div class="c-step__item active"> Remblais</div>
<div class="c-step__item"> Anomalies</div>
<div class="c-step__item"> Rapports</div>
</div>
<div class="o-head--main">
<div class="o-study-type-holder">Contrôle de compactage</div>
<div class="o-steps">
<div class="c-step__item"> Sondages</div>
<div class="c-step__item active"> Remblais</div>
<div class="c-step__item"> Anomalies</div>
<div class="c-step__item"> Rapports</div>
</div>
</div>
<div class="o-nav-split"><a href="">Lorem Ipsum étape inferieure</a><a href="">Lorem Ipsum étape supérieure</a></div>