mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-23 21:10:33 +03:00
Code Activity

Support tab icons

Browse Source
This commit is contained in:
cristijora
2017-04-16 13:22:04 +03:00
parent 7cc9c5aef4
commit 3410412fec
5 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/example/index.html
Vendored
+19 -10
View File
@@ -10,16 +10,20 @@
<body> <body>
<div id="app"> <div id="app">
<div class="col-xs-8 col-xs-offset-2"> <div class="col-xs-8 col-xs-offset-2">
<tab-wizard> <tab-wizard @on-complete="onComplete">
<tab-content title="Personal details"> <tab-wizard @on-complete="onComplete">
My first tab content <tab-content title="Personal details"
</tab-content> icon="ti-user">
<tab-content title="Additional Info"> My first tab content
My second tab content </tab-content>
</tab-content> <tab-content title="Additional Info"
<tab-content title="Last step"> icon="ti-settings">
Yuhuuu! This seems pretty damn simple My second tab content
</tab-content> </tab-content>
<tab-content title="Last step"
icon="ti-check">
Yuhuuu! This seems pretty damn simple
</tab-content>
</tab-wizard> </tab-wizard>
</div> </div>
</div> </div>
@@ -30,6 +34,11 @@
Vue.use(VueTabWizard) Vue.use(VueTabWizard)
new Vue({ new Vue({
el: '#app', el: '#app',
methods: {
onComplete: function(){
alert('Yay. Done!');
}
}
}) })
</script> </script>
</body> </body>
dist/vue-tab-wizard.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/App.vue
+13 -6
View File
@@ -1,14 +1,16 @@
<template> <template>
<div class="col-xs-8 col-xs-offset-2"> <div class="col-xs-8 col-xs-offset-2">
<tab-wizard @on-complete="onComplete">
<tab-wizard> <tab-content title="Personal details"
<tab-content title="Personal details"> icon="ti-user">
My first tab content My first tab content
</tab-content> </tab-content>
<tab-content title="Additional Info"> <tab-content title="Additional Info"
icon="ti-settings">
My second tab content My second tab content
</tab-content> </tab-content>
<tab-content title="Last step"> <tab-content title="Last step"
icon="ti-check">
Yuhuuu! This seems pretty damn simple Yuhuuu! This seems pretty damn simple
</tab-content> </tab-content>
</tab-wizard> </tab-wizard>
@@ -18,6 +20,11 @@
<script> <script>
export default { export default {
name: 'app' name: 'app',
methods: {
onComplete () {
alert('Yay!')
}
}
} }
</script> </script>
src/components/TabContent.vue
+4
View File
@@ -12,6 +12,10 @@
type: String, type: String,
default: '' default: ''
}, },
icon: {
type: String,
default: ''
},
beforeChange: { beforeChange: {
type: Function type: Function
} }
src/components/TabWizard.vue
+5 -2
View File
@@ -15,7 +15,7 @@
<li v-for="(tab, index) in tabs" :class="{active:tab.active}"> <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
<a href="" @click.prevent="navigateToTab(index)"> <a href="" @click.prevent="navigateToTab(index)">
<div class="icon-circle" :class="{checked:isChecked(index)}"> <div class="icon-circle" :class="{checked:isChecked(index)}">
<i class="ti-user"></i> <i v-if="tab.icon" :class="tab.icon"></i>
</div> </div>
{{tab.title}} {{tab.title}}
</a> </a>
@@ -32,7 +32,7 @@
@click="prevTab"> @click="prevTab">
{{backButtonText}} {{backButtonText}}
</button> </button>
<button v-if="isLastStep" type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="nextTab"> <button v-if="isLastStep" type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="finish">
{{finishButtonText}} {{finishButtonText}}
</button> </button>
<button v-else type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="nextTab"> <button v-else type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="nextTab">
@@ -158,6 +158,9 @@
this.activeTabIndex-- this.activeTabIndex--
this.isLastStep = false this.isLastStep = false
} }
},
finish () {
this.$emit('on-complete')
} }
}, },
mounted () { mounted () {