mirror of
https://github.com/tenrok/vue-form-wizard.git
synced 2026-06-18 06:30:32 +03:00
Update README.md
This commit is contained in:
@@ -26,3 +26,67 @@ Note: For now vue-tab-wizard requires bootstrap to look as it should. Also vue-t
|
|||||||
</tab-content>
|
</tab-content>
|
||||||
</tab-wizard>
|
</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'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#e74c3c' //circle, border and text color
|
||||||
|
},
|
||||||
|
transition: {
|
||||||
|
type: String,
|
||||||
|
default: '' //name of the transition when transition between steps
|
||||||
|
},
|
||||||
|
startIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0 //the index of the initial tab that you want to be active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tab content props
|
||||||
|
```js
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: '' //name of the icon. Supports themify icons only for now
|
||||||
|
},
|
||||||
|
beforeChange: {
|
||||||
|
type: Function //function to execute before changing tabs. Has to return true or false. If returns false, tab change is restricted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user