|
1 |
| -# vue-form-wizard |
2 | 1 | A dynamic form wizard to split your forms easier
|
3 | 2 |
|
4 | 3 | Vue-form-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than
|
5 | 4 | wasting time on details. Just forget about id's, external scripts and jQuery dependencies
|
6 | 5 |
|
7 |
| -# Demos |
8 |
| -Basic [demo](https://jsfiddle.net/bt5dhqtf/97/) |
9 |
| - |
10 |
| -Other demos: |
11 |
| -* [Squared steps](https://jsfiddle.net/bt5dhqtf/98/) |
12 |
| -* [Tabbed steps](https://jsfiddle.net/bt5dhqtf/99/) |
13 |
| -* [Step index](https://jsfiddle.net/bt5dhqtf/100/) Start at any step. Note: start-index is zero-based and the count starts at 0 |
14 |
| -* [Custom button and title text](https://jsfiddle.net/bt5dhqtf/101/) |
15 |
| -* [Custom title slot](https://jsfiddle.net/bt5dhqtf/102/) |
16 |
| -* [Customized buttons with slots](https://jsfiddle.net/bt5dhqtf/103/) Replace stuff you don't like |
17 |
| -* [Call a function before tab switch](https://jsfiddle.net/bt5dhqtf/105/) |
18 |
| -* [Complete form example](https://jsfiddle.net/CristiJ/bt5dhqtf/286/) integrated with [vue-form-generator](https://github.com/icebob/vue-form-generator) |
19 |
| -* [Element UI form integration](https://jsfiddle.net/bt5dhqtf/409/) |
20 |
| -* [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs |
21 |
| -* [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` prop can accept a promise that is resolved with `true` which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet) |
22 | 6 |
|
23 |
| -There is also a [Playground](?id=playground) where you can test stuff out right here in the browser! |
24 | 7 | # Usage
|
25 | 8 |
|
26 | 9 | ## NPM
|
@@ -63,6 +46,21 @@ components: {
|
63 | 46 | </tab-content>
|
64 | 47 | </form-wizard>
|
65 | 48 | ```
|
| 49 | +# Demos |
| 50 | +Basic [demo](https://jsfiddle.net/bt5dhqtf/97/) |
| 51 | + |
| 52 | +Other demos: |
| 53 | +* [Squared steps](https://jsfiddle.net/bt5dhqtf/98/) |
| 54 | +* [Tabbed steps](https://jsfiddle.net/bt5dhqtf/99/) |
| 55 | +* [Step index](https://jsfiddle.net/bt5dhqtf/100/) Start at any step. Note: start-index is zero-based and the count starts at 0 |
| 56 | +* [Custom button and title text](https://jsfiddle.net/bt5dhqtf/101/) |
| 57 | +* [Custom title slot](https://jsfiddle.net/bt5dhqtf/102/) |
| 58 | +* [Customized buttons with slots](https://jsfiddle.net/bt5dhqtf/103/) Replace stuff you don't like |
| 59 | +* [Call a function before tab switch](https://jsfiddle.net/bt5dhqtf/105/) |
| 60 | +* [Complete form example](https://jsfiddle.net/CristiJ/bt5dhqtf/286/) integrated with [vue-form-generator](https://github.com/icebob/vue-form-generator) |
| 61 | +* [Element UI form integration](https://jsfiddle.net/bt5dhqtf/409/) |
| 62 | +* [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs |
| 63 | +* [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` prop can accept a promise that is resolved with `true` which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet) |
66 | 64 |
|
67 | 65 | # Playground
|
68 | 66 |
|
|
0 commit comments