Saltar al contenido principal
Version: Next (5.0)

Asistente

Un asistente (wizard) guía al usuario por un grupo ordenado de pasos. Muestra la lista de pasos con el actual resaltado y el panel del paso actual. El usuario se mueve con botones cuyas acciones next-step y prev-step son las de abajo: pulsa Next y Back en el área de pruebas, se ejecutan de verdad.

Vista previa en vivo
XML
<wizard id="demo" initial-load="enum" target-action="SignupSteps">
  <wizard-panel id="account">
    <tag type="p" label="Choose the name and the email of the new account." />
  </wizard-panel>
  <wizard-panel id="plan">
    <tag type="p"
         label="Pick the plan: monthly or yearly, with or without support." />
  </wizard-panel>
  <wizard-panel id="payment">
    <tag type="p" label="Enter the payment method and accept the conditions." />
  </wizard-panel>
</wizard>
<button id="Back" label="Back" style="btn-ghost">
  <button-action type="prev-step" target="demo" />
</button>
<button id="Next" label="Next" style="btn-primary">
  <button-action type="next-step" target="demo" />
</button>

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

AtributoControlValores
wizard-panelPasos234
orientationOrientaciónhorizontalvertical

Los pasos vienen de una lista enumerada o de una consulta del servidor (initial-load y target-action), y el valor de cada opción es el id de su wizard-panel. Aquí la vista previa rellena esa lista con una fija. Un paso posterior al actual no se puede pulsar: el usuario llega a él con Next y puede volver a los pasos ya hechos.

Recetas​

Alta en tres pasos​

Cada panel del asistente contiene cualquier componente. Los botones se colocan después del asistente, en un div propio.

<wizard id="signup" initial-load="enum" target-action="SignupSteps">
  <wizard-panel id="who">
    <criteria id="Name" component="text" label="Nombre" placeholder="Nombre completo" />
    <criteria id="Email" component="text" label="Correo" icon="lucide:mail" />
  </wizard-panel>
  <wizard-panel id="plan">
    <criteria id="Plan" component="select" label="Plan" initial-load="enum" target-action="PlanList" />
  </wizard-panel>
  <wizard-panel id="done">
    <tag type="p" label="Todo listo. Pulsa Siguiente otra vez para quedarte en el último paso." />
  </wizard-panel>
</wizard>
<tag type="div">
  <button id="Back" label="Atrás" style="btn-ghost">
    <button-action type="prev-step" target="signup" />
  </button>
  <button id="Next" label="Siguiente" style="btn-primary">
    <button-action type="next-step" target="signup" />
  </button>
</tag>

Eventos y acciones​

Un asistente no tiene un evento propio: el usuario se mueve con los botones o pulsando un paso ya hecho. Las acciones que lo mueven:

AcciónDescripción
next-stepPasa al siguiente paso del asistente de target
prev-stepVuelve al paso anterior
first-stepVa al primer paso
last-stepVa al último paso
nth-stepVa al paso cuyo id está en el parámetro value

Un paso que contiene un campo inválido se marca en la lista.

Más​