Pasos
Indica en qué punto de un proceso largo está la persona y qué falta.
Pasos horizontales
Para formularios largos o procesos con orden. Completado, actual y pendiente se distinguen por forma y color, no solo por color.
- Datos del estudiante
- 2Tutor
- 3Documentos
- 4Confirmación
<ol class="mr-stepper w-100" aria-label="Avance del registro">
<li class="mr-stepper-item is-done"><span class="mr-stepper-dot"><i class="ri-check-line"></i></span><span class="mr-stepper-label">Datos del estudiante</span></li>
<li class="mr-stepper-item is-current" aria-current="step"><span class="mr-stepper-dot">2</span><span class="mr-stepper-label">Tutor</span></li>
<li class="mr-stepper-item"><span class="mr-stepper-dot">3</span><span class="mr-stepper-label">Documentos</span></li>
<li class="mr-stepper-item"><span class="mr-stepper-dot">4</span><span class="mr-stepper-label">Confirmación</span></li>
</ol>Pasos en los que se puede hacer clic
Para volver a un paso ya completado, envuelve el punto y la etiqueta en un botón mr-stepper-link. El paso pendiente va deshabilitado.
<ol class="mr-stepper w-100" aria-label="Avance del registro">
<li class="mr-stepper-item is-done"><button type="button" class="mr-stepper-link"><span class="mr-stepper-dot"><i class="ri-check-line"></i></span><span class="mr-stepper-label">Contacto</span></button></li>
<li class="mr-stepper-item is-current" aria-current="step"><button type="button" class="mr-stepper-link"><span class="mr-stepper-dot">2</span><span class="mr-stepper-label">Aspirante</span></button></li>
<li class="mr-stepper-item"><button type="button" class="mr-stepper-link" disabled><span class="mr-stepper-dot">3</span><span class="mr-stepper-label">Datos</span></button></li>
</ol>Pasos verticales con descripción
Cuando cada paso necesita una explicación o una fecha.
- Solicitud enviada16 de julio, 11:47 a. m.
- 2Revisión de documentosResponsable: Laura Ramírez
- 3EntrevistaPendiente de agendar
- 4Resultado
<ol class="mr-stepper mr-stepper-vertical" style="max-width: 420px;">
<li class="mr-stepper-item is-done"><span class="mr-stepper-dot"><i class="ri-check-line"></i></span><span><span class="mr-stepper-label">Solicitud enviada</span><span class="d-block mr-small">16 de julio, 11:47 a. m.</span></span></li>
<li class="mr-stepper-item is-current"><span class="mr-stepper-dot">2</span><span><span class="mr-stepper-label">Revisión de documentos</span><span class="d-block mr-small">Responsable: Laura Ramírez</span></span></li>
<li class="mr-stepper-item"><span class="mr-stepper-dot">3</span><span><span class="mr-stepper-label">Entrevista</span><span class="d-block mr-small">Pendiente de agendar</span></span></li>
<li class="mr-stepper-item"><span class="mr-stepper-dot">4</span><span><span class="mr-stepper-label">Resultado</span></span></li>
</ol>
Sí
Numera los pasos y nombra cada uno con un sustantivo corto. Deja volver a un paso completado.
No
No uses pasos para procesos de uno o dos pasos, ni más de 6: divide el proceso.