Comparte en Facebook Twitter Google+

Banner vue-form-wizard
Seguramente alguna vez has rellenado un formulario donde a medida que vas completando los campos de diferentes secciones vas avanzando a otras partes del mismo; si necesitas hacer esto en un proyecto puedes lograrlo con vue-form-wizard, el cual es un plugin de Vue.js que nos permite dividir el flujo de un formulario en múltiples pasos (tipo Wizard).

Ejemplo de vue-form-wizard

En este tutorial aprenderemos a utilizar vue-form-wizard para dividir el flujo de nuestros formularios y hacerlos más dinámicos.

Instalación y primeros pasos

Lo primero que tenemos que hacer es instalar vue-form-wizard con npm. Esto lo hacemos ejecutando el siguiente comando en la terminal:

npm install vue-form-wizard

Si no estás utilizando vue-cli/webpack puedes incluir el plugin directamente desde un CDN:

<link rel="stylesheet" href="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css">

<script src="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js"></script>

Luego de hacer esto, debemos registrar el componente, ya sea de forma global o local, con webpack:

O si estás utilizando el CDN no debes realizar ningún import, simplemente debes usar Vue.use dentro de la etiqueta <script>:

Es muy sencillo comenzar a utilizar vue-form-wizard, lo único que tenemos que hacer es incluir el componente <form-wizard> en nuestra plantilla y dentro de este el componente <tab-content>. Este último lo incluimos dependiendo de la cantidad de pasos que queramos agregar:

En este ejemplo estamos agregando tres <tab-content>, lo que quiere decir que estamos agregando tres pasos o pestañas. Observa como, mediante la propiedad title, indicamos el valor del título de la pestaña.

Agregando íconos

Si estás siguiendo estos pasos te darás cuenta que en el título de las pestañas no tienes los íconos que se muestran en la imagen al inicio del tutorial. Para poder tener estos íconos debes incluir la librería Themify Icons:

https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css

Hecho esto, al componente <tab-content> le pasamos la propiedad icon, cuyo valor es el ícono que queremos mostrar:

Personalizar el texto por defecto

También te habrás dado cuenta que por defecto el texto del botón para continuar es “Next”. Para cambiar esto, debemos personalizar el valor de la propiedad next-button-text en el componente <form-wizard>:

Otro detalle que no habrás pasado por alto es el texto “Awesome Wizard” junto con “Split a complicated flow in multiple steps” que aparece en la parte superior. Para modificar esto debemos alterar el valor de las propiedades o dejarlas vacías si no queremos mostrar ningún texto:

Cambiar el color y forma de las pestañas

Puedes modificar el color de las pestañas y botones utilizando la propiedad color y pasando un valor hexadecimal o el nombre de un color (en inglés):

Para modificar la forma de las pestañas debemos usar la propiedad shape. Podemos utilizar los valores circle (por defecto), square o tab:

Otras propiedades de personalización disponibles para el componente <form-wizard> son:

  • back-button-text para modificar el valor del botón para retroceder.
  • finish-button-text para modificar el valor del botón para finalizar.
  • step-size para modificar el tamaño de las pestañas o iconos. Por defecto el valor es md para mediano y puedes cambiarlo por xs, sm y lg.
  • transition para modificar el efecto de transición.
  • start-index para indicar en que paso o pestaña queremos iniciar el formulario.

Eventos

vue-form-wizard emite ciertos eventos cuando determinadas acciones se realizan o completan. Estos eventos son:

  • on-complete, que es llamado cuando el botón de finalizar es presionado.
  • on-loading, llamado al momento de cargar un recurso.
  • on-validate, llamado cuando la ejecución de un método es completada. El evento envía un booleano que representa el resultado de la validación.
  • on-change, que es llamado cuando se avanza a una nueva pestaña.

Los eventos los agregamos al componente <form-wizard>. Por ejemplo, vamos a emitir un evento al finalizar el formulario, esto lo hacemos con on-complete:

Luego agregamos nuestro método:

Hecho esto, al presionar el botón de finalizar se emite el evento on-complete y se ejecuta el método que indicamos, que en este caso es onComplete, el cual nos muestra un mensaje.

Algunos de estos eventos son ejecutados utilizando la directiva before-change y también podemos agregar eventos personalizados. Por ejemplo, podemos agregar un método que sea llamado antes de cambiar de pestaña:

Luego podemos agregar el método beforeTabSwitch. Por supuesto el nombre de este método es personalizado y puedes usar el que mejor te parezca:

Espero que te haya gustado este tutorial y te resulte útil. Recuerda que en la documentación oficial de vue-form-wizard puedes encontrar diferentes ejemplos así como mayor información sobre el funcionamiento del plugin.

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprovecha nuestra promoción activa y únete a Styde por menos de 10 USD al mes: ver planes semestral y anual.