A lightweight, flexible, customizable, and high-performance tab form wizard component for Vue 3.
How to use it:
1. Import and register the component.
// global import Vue3FormWizard from 'vue3-form-wizard' import 'vue3-form-wizard/dist/style.css' Vue.use(Vue3FormWizard)
// local
import {FormWizard, TabContent} from 'vue3-form-wizard'
import 'vue3-form-wizard/dist/style.css'
components: {
FormWizard,
TabContent
}
2. Add tab content to the form wizard.
<form-wizard>
<tab-content title="Personal details">
My first tab content
</tab-content>
<tab-content title="Additional Info">
My second tab content
</tab-content>
<tab-content title="Last step">
Yuhuuu! This seems pretty damn simple
</tab-content>
</form-wizard>
3. Form wizard props.
title: {
type: String,
default: 'Awesome Wizard'
},
subtitle: {
type: String,
default: 'Split a complicated flow in multiple steps'
},
nextButtonText: {
type: String,
default: 'Next'
},
backButtonText: {
type: String,
default: 'Back'
},
finishButtonText: {
type: String,
default: 'Finish'
},
stepSize: {
type: String,
default: 'md',
validator: (value) => {
let acceptedValues = ['xs', 'sm', 'md', 'lg']
return acceptedValues.indexOf(value) !== -1
}
},
/***
* Sets validation (on/off) for back button. By default back button ignores validation
*/
validateOnBack: Boolean,
/***
* Applies to text, border and circle
*/
color: {
type: String,
default: '#e74c3c' //circle, border and text color
},
/***
* Is set to current step and text when beforeChange function fails
*/
errorColor: {
type: String,
default: '#8b0000'
},
/**
* Can take one of the following values: 'circle|square|tab`
*/
shape: {
type: String,
default: 'circle'
},
/**
* name of the transition when transition between steps
*/
transition: {
type: String,
default: '' //name of the transition when transition between steps
},
/***
* Index of the initial tab to display
*/
startIndex: {
type: Number,
default: 0
}
/*
* If true, the wizard not back step on click wizard step
*/
disableBackOnClickStep: {
type: Boolean,
default: false,
},
/*
* If true, the wizard not back step on click wizard step and back button
*/
disableBack: {
type: Boolean,
default: false,
},
4. Tab content props.
title: {
type: String,
default: ''
},
/***
* Icon name for the upper circle corresponding to the tab
* Supports themify icons only for now.
*/
icon: {
type: String,
default: ''
},
/***
* Only render the content when the tab is active
*/
lazy: {
type: Boolean,
default: false
},
/***
* Function to execute before tab switch. Return value must be boolean
* If the return result is false, tab switch is restricted
*/
beforeChange: {
type: Function
}
5. Available events.
- @on-complete
- @on-loading
- @on-validate
- @on-error
- @on-change
Preview:
Download Details:
Author: parsajiravand
Live Demo: https://vue3-form-wizard-document.netlify.app/demos/
Download Link: https://github.com/parsajiravand/vue3-form-wizard/archive/refs/heads/master.zip
Official Website: https://github.com/parsajiravand/vue3-form-wizard
Install & Download: