mirror of
https://github.com/tenrok/vue-form-wizard.git
synced 2026-06-09 15:12:23 +03:00
Cristi Jora
110 lines
2.6 KiB
Markdown
110 lines
2.6 KiB
Markdown
# WIP vue-tab-wizard
|
|
A dynamic tab wizard to split your forms easier
|
|
|
|
Forms are hard to handle especially if you have a lot of fields. A page often looks very ugly when it has a ton of form fields.
|
|
There are many tab wizards out there in the wild, but most of them are jQuery based and once you have a lot of tabs, they are hard to manage/modify
|
|
or customize in an easy declarative way.
|
|
Vue-tab-wizard is a simple component which simplifies your tab wizard and lets you focus on the functional part of your app rather than
|
|
wasting time on details. Just forget about id's, external scripts and jQuery dependencies
|
|
|
|
# Demo
|
|
Refer to this [fiddle](https://jsfiddle.net/CristiJ/bt5dhqtf/8/)
|
|
|
|
Note: For now vue-tab-wizard requires bootstrap to look as it should. Also vue-tab-wizard works with themify-icons (WIP)
|
|
|
|
# Usage
|
|
```html
|
|
<tab-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>
|
|
</tab-wizard>
|
|
```
|
|
|
|
# Props
|
|
## Tab Wizard props
|
|
```js
|
|
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'
|
|
},
|
|
/***
|
|
* Applies to text, border and circle
|
|
*/
|
|
color: {
|
|
type: String,
|
|
default: '#e74c3c' //circle, border and text color
|
|
},
|
|
/**
|
|
* 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
|
|
}
|
|
}
|
|
```
|
|
|
|
## Tab content props
|
|
```js
|
|
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: ''
|
|
},
|
|
/***
|
|
* Function to execute before tab switch. Return value must be boolean
|
|
* If the return result is false, tab switch is restricted
|
|
*/
|
|
beforeChange: {
|
|
type: Function
|
|
}
|
|
}
|
|
```
|
|
|
|
# Slots
|
|
* **Default** - Used for tab-contents
|
|
* **title** - Upper title section including sub-title
|
|
* **prev** - Previous button content (no need to worry about handling the button functionality)
|
|
* **next** - Next button content
|
|
* **finish** - Finish button content
|
|
|