mirror of
https://github.com/tenrok/vue-form-wizard.git
synced 2026-06-12 03:52:24 +03:00
Update README.md
This commit is contained in:
Cristi Jora
+102
-104
@@ -46,6 +46,108 @@ components: {
|
||||
</tab-content>
|
||||
</form-wizard>
|
||||
```
|
||||
# Props
|
||||
## Form 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'
|
||||
},
|
||||
/***
|
||||
* 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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
}
|
||||
}
|
||||
```
|
||||
## Events
|
||||
Vue-form-wizard emits certain events when certain actions happen inside the component. The events can be noticed in some of the demos and especially in the [async validation demo](https://jsfiddle.net/bt5dhqtf/272/)
|
||||
* **on-complete** Called when the finish button is clicked and the `before-change` for the last step (if present) was executed. No params are sent together with this event. `this.$emit('on-complete')`
|
||||
* **on-loading** Called whenever an async `before-change` is executed. This event is emitted before executing `before-change` and after finishing execution of `before-change` method. `on-loading` is emitted together with a Boolean value. `this.$emit('on-loading', value)`
|
||||
* **on-validate** Called whenever the execution of a `before-change` method is completed. The event sends along a Boolean which represents the validation result as well as an int with te tab index. `this.$emit('on-validate', validationResult, this.activeTabIndex)`
|
||||
* **on-error** Called when `before-change` is a promised and is rejected with a message. The message is passed along `this.$emit('on-error', error)` See async validation fiddle
|
||||
## 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
|
||||
|
||||
## Scoped slots
|
||||
Form-wizard exposes 2 scoped slots which can be used to customize some parts of the wizard. Usage example and implementation details are presented in [0.6.2 release](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2)
|
||||
@@ -556,110 +658,6 @@ span.error{
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
# Props
|
||||
## Form 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'
|
||||
},
|
||||
/***
|
||||
* 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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
}
|
||||
}
|
||||
```
|
||||
## Events
|
||||
Vue-form-wizard emits certain events when certain actions happen inside the component. The events can be noticed in some of the demos and especially in the [async validation demo](https://jsfiddle.net/bt5dhqtf/272/)
|
||||
* **on-complete** Called when the finish button is clicked and the `before-change` for the last step (if present) was executed. No params are sent together with this event. `this.$emit('on-complete')`
|
||||
* **on-loading** Called whenever an async `before-change` is executed. This event is emitted before executing `before-change` and after finishing execution of `before-change` method. `on-loading` is emitted together with a Boolean value. `this.$emit('on-loading', value)`
|
||||
* **on-validate** Called whenever the execution of a `before-change` method is completed. The event sends along a Boolean which represents the validation result as well as an int with te tab index. `this.$emit('on-validate', validationResult, this.activeTabIndex)`
|
||||
* **on-error** Called when `before-change` is a promised and is rejected with a message. The message is passed along `this.$emit('on-error', error)` See async validation fiddle
|
||||
## 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
|
||||
|
||||
## Contribution
|
||||
1. Fork the repo
|
||||
2. run `npm install`
|
||||
|
||||
Reference in New Issue
Block a user