mirror of
https://github.com/tenrok/vue-form-wizard.git
synced 2026-06-22 20:00:33 +03:00
Add playground demos
This commit is contained in:
cristijora
+443
@@ -20,6 +20,7 @@ Other demos:
|
|||||||
* [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
|
* [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
|
||||||
* [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)
|
* [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)
|
||||||
|
|
||||||
|
There is also a [Playground](?id=playground) where you can test stuff out right here in the browser!
|
||||||
# Usage
|
# Usage
|
||||||
|
|
||||||
## NPM
|
## NPM
|
||||||
@@ -174,3 +175,445 @@ Vue-form-wizard emits certain events when certain actions happen inside the comp
|
|||||||
5. `npm run build` to generate the new js and css bundles
|
5. `npm run build` to generate the new js and css bundles
|
||||||
6. Commit your changes + the js and css bundles so it's easy to test them right away in fiddles, codepen etc
|
6. Commit your changes + the js and css bundles so it's easy to test them right away in fiddles, codepen etc
|
||||||
7. Open a Pull Request. For more information refer to [github forking workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962)
|
7. Open a Pull Request. For more information refer to [github forking workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962)
|
||||||
|
|
||||||
|
|
||||||
|
# Playground
|
||||||
|
|
||||||
|
## Simple
|
||||||
|
<vuep template="#simpledemo"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="simpledemo">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
## Square steps
|
||||||
|
|
||||||
|
<vuep template="#squaredsteps"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="squaredsteps">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
shape="square"
|
||||||
|
color="#3498db">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
## Tabbed steps
|
||||||
|
|
||||||
|
<vuep template="#tabbedsteps"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="tabbedsteps">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
shape="tab"
|
||||||
|
color="#9b59b6">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
## Start from a specific index
|
||||||
|
|
||||||
|
<vuep template="#startindex"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="startindex">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
:start-index="1"
|
||||||
|
color="#e67e22">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
## Custom button and title text
|
||||||
|
|
||||||
|
<vuep template="#customtext"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="customtext">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
title="This is a new title"
|
||||||
|
subtitle="And a new subtitle"
|
||||||
|
shape="tab"
|
||||||
|
back-button-text="Go back!"
|
||||||
|
next-button-text="Go next!"
|
||||||
|
finish-button-text="We're there"
|
||||||
|
color="#9b59b6">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Replace buttons and title with Slots
|
||||||
|
|
||||||
|
<vuep template="#customslots"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="customslots">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
shape="tab"
|
||||||
|
color="#e67e22">
|
||||||
|
<h2 slot="title">This will replace my whole title</h2>
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
|
||||||
|
<button slot="prev">Back</button>
|
||||||
|
<button slot="next">Next</button>
|
||||||
|
<button slot="finish">Finish</button>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Call a function before tab switch
|
||||||
|
|
||||||
|
<vuep template="#callfunction"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="callfunction">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
shape="tab"
|
||||||
|
color="#9b59b6">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
icon="ti-user" :before-change="beforeTabSwitch">
|
||||||
|
My first tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
My second tab content
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
},
|
||||||
|
beforeTabSwitch: function(){
|
||||||
|
alert("This is called before switchind tabs")
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Async validation
|
||||||
|
|
||||||
|
<vuep template="#asyncvalidation"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="asyncvalidation">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete"
|
||||||
|
@on-loading="setLoading"
|
||||||
|
@on-validate="handleValidation"
|
||||||
|
@on-error="handleErrorMessage"
|
||||||
|
shape="circle"
|
||||||
|
color="gray"
|
||||||
|
error-color="#e74c3c">
|
||||||
|
<tab-content title="Personal details"
|
||||||
|
:before-change="validateAsync"
|
||||||
|
icon="ti-user">
|
||||||
|
First tab
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info"
|
||||||
|
icon="ti-settings">
|
||||||
|
Second tab
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step"
|
||||||
|
icon="ti-check">
|
||||||
|
Third tab
|
||||||
|
</tab-content>
|
||||||
|
|
||||||
|
<div class="loader" v-if="loadingWizard"></div>
|
||||||
|
<div v-if="errorMsg">
|
||||||
|
<span class="error">{{errorMsg}}</span>
|
||||||
|
</div>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
span.error{
|
||||||
|
color:#e74c3c;
|
||||||
|
font-size:20px;
|
||||||
|
display:flex;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
loadingWizard: false,
|
||||||
|
errorMsg: null,
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onComplete: function(){
|
||||||
|
alert('Yay. Done!');
|
||||||
|
},
|
||||||
|
setLoading: function(value) {
|
||||||
|
this.loadingWizard = value
|
||||||
|
},
|
||||||
|
handleValidation: function(isValid, tabIndex){
|
||||||
|
console.log('Tab: '+tabIndex+ ' valid: '+isValid)
|
||||||
|
},
|
||||||
|
handleErrorMessage: function(errorMsg){
|
||||||
|
this.errorMsg = errorMsg
|
||||||
|
},
|
||||||
|
validateAsync:function() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if(this.count < 1){
|
||||||
|
this.count ++
|
||||||
|
reject('This is a custom validation error message. Click next again to get rid of the validation')
|
||||||
|
}else{
|
||||||
|
this.count = 0
|
||||||
|
resolve(true)
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Element UI integration
|
||||||
|
|
||||||
|
<vuep template="#elementui"></vuep>
|
||||||
|
|
||||||
|
<script v-pre type="text/x-template" id="elementui">
|
||||||
|
<template>
|
||||||
|
<form-wizard @on-complete="onComplete" shape="circle" color="#20a0ff" error-color="#ff4949">
|
||||||
|
<tab-content title="Personal details" icon="ti-user" :before-change="validateFirstStep">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" ref="ruleForm">
|
||||||
|
<el-form-item label="Approved by" prop="user">
|
||||||
|
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Activity zone" prop="region">
|
||||||
|
<el-select v-model="formInline.region" placeholder="Activity zone">
|
||||||
|
<el-option label="Zone one" value="shanghai"></el-option>
|
||||||
|
<el-option label="Zone two" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Additional Info" icon="ti-settings">
|
||||||
|
Second tab
|
||||||
|
</tab-content>
|
||||||
|
<tab-content title="Last step" icon="ti-check">
|
||||||
|
Yuhuuu! This seems pretty damn simple
|
||||||
|
</tab-content>
|
||||||
|
|
||||||
|
<el-button type="primary" slot="prev">Back</el-button>
|
||||||
|
<el-button type="primary" slot="next">Next</el-button>
|
||||||
|
<el-button type="primary" slot="finish">Finish</el-button>
|
||||||
|
</form-wizard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Vue.use(VueFormWizard)
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formInline: {
|
||||||
|
user: '',
|
||||||
|
region: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
user: [{
|
||||||
|
required: true,
|
||||||
|
message: 'Please input Activity name',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 3,
|
||||||
|
max: 5,
|
||||||
|
message: 'Length should be 3 to 5',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
region: [{
|
||||||
|
required: true,
|
||||||
|
message: 'Please select Activity zone',
|
||||||
|
trigger: 'change'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onComplete: function() {
|
||||||
|
alert('Yay. Done!');
|
||||||
|
},
|
||||||
|
validateFirstStep() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.$refs.ruleForm.validate((valid) => {
|
||||||
|
resolve(valid);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -6,6 +6,10 @@
|
|||||||
<meta name="description" content="A vue based tab/form wizard">
|
<meta name="description" content="A vue based tab/form wizard">
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||||
|
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
|
||||||
|
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.3.4/lib/theme-default/index.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/vuep/dist/vuep.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
@@ -17,4 +21,29 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/vue"></script>
|
||||||
|
<script src="https://npmcdn.com/vue-router@2.4.0/dist/vue-router.js"></script>
|
||||||
|
<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
|
||||||
|
<script src="https://unpkg.com/element-ui@1.3.4/lib/index.js"></script>
|
||||||
|
<script src="https://unpkg.com/vuep"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.vuep{
|
||||||
|
height: inherit !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vuep-editor,
|
||||||
|
.vuep-preview{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-s-material .cm-error{
|
||||||
|
color: rgba(255, 83, 112, 1);
|
||||||
|
background-color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user