Stepper

Stepper es el componente que muestra los pasos que contiene un flujo, aparence generalmente dentro de una lista, puede tener estados de avance con cambios de color y un tooltipo para precisar a que paso corresponde cada uno de los puntos. Adicionalmente puede tener un badge.

access_timeaccess_timeaccess_timeaccess_time

waiting

Mostrar Label

Seleccionar Step...Step 1Step 2Step 3Step 4

Seleccionar Estado...waitingin processdone

Ruby

<%= stepper_widget toggle: 'tooltip' do |s|
    steps.each do |status_step|
        s.step status_step[:name], status_step[:status]
    end
end %>

Html

  <div class="stepper-items-container mr-4">
    <span>
      <span class="step-item-icon step-waiting">
        <span class=" material-icons  notranslate " aria-hidden="true">access_time</span>
      </span>
    </span>
    <span class="stepper-items-separator"></span>

    <span>
      <span class="step-item-icon step-waiting">
        <span class=" material-icons  notranslate " aria-hidden="true">access_time</span>
      </span>
    </span>
    <span class="stepper-items-separator"></span>

    <span>
      <span class="step-item-icon step-waiting">
        <span class=" material-icons  notranslate " aria-hidden="true">access_time</span>
      </span>
    </span>
    <span class="stepper-items-separator"></span>

    <span>
      <span class="step-item-icon step-waiting">
        <span class=" material-icons  notranslate " aria-hidden="true">access_time</span>
      </span>
    </span>
    <span class="stepper-items-separator"></span>
    <!--  El label a continuación es variable dependiente del estado del último step  -->
    <div class="chip badge badge-success ml-3">waiting</div>
  </div>

El stepper_widget es un componente que es útil para definir casos

Lista de parámetros

Parámetro

Tipo

Detalle

steps	array	:name, :status
toggle	type	tooltip / popover
show_label	boolean	Por defecto es true, para quitarlo el label agregar false

Para dibujar el wizard_step, utilice el siguiente helper stepper_widget

Anatomía Stepper

1. Pasos Activos

Los pasos activos se ven representados con un check para evidenciar un paso verificado. Otras opciones posibles en los steppers son: In-process y Done.

2. Pendiente

Al hacer clic en otra opción, se anulará la selección de la opción actual.

3. Chip

Indica que el proceso fue iniciado.