mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-11 06:22:24 +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>
<div id="app">
<div class="col-xs-8 col-xs-offset-2">
<tab-wizard>
<tab-content title="Personal details">
My first tab content
</tab-content>
<tab-content title="Additional Info">
My second tab content
</tab-content>
<tab-content title="Last step">
Yuhuuu! This seems pretty damn simple
</tab-content>
<tab-wizard @on-complete="onComplete">
<tab-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>
</tab-wizard>
</div>
</div>
@@ -30,6 +34,11 @@
Vue.use(VueTabWizard)
new Vue({
el: '#app',
methods: {
onComplete: function(){
alert('Yay. Done!');
}
}
})
</script>
</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>
<div class="col-xs-8 col-xs-offset-2">
<tab-wizard>
<tab-content title="Personal details">
<tab-wizard @on-complete="onComplete">
<tab-content title="Personal details"
icon="ti-user">
My first tab content
</tab-content>
<tab-content title="Additional Info">
<tab-content title="Additional Info"
icon="ti-settings">
My second tab content
</tab-content>
<tab-content title="Last step">
<tab-content title="Last step"
icon="ti-check">
Yuhuuu! This seems pretty damn simple
</tab-content>
</tab-wizard>
@@ -18,6 +20,11 @@
<script>
export default {
name: 'app'
name: 'app',
methods: {
onComplete () {
alert('Yay!')
}
}
}
</script>
src/components/TabContent.vue
+4
View File
@@ -12,6 +12,10 @@
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
beforeChange: {
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}">
<a href="" @click.prevent="navigateToTab(index)">
<div class="icon-circle" :class="{checked:isChecked(index)}">
<i class="ti-user"></i>
<i v-if="tab.icon" :class="tab.icon"></i>
</div>
{{tab.title}}
</a>
@@ -32,7 +32,7 @@
@click="prevTab">
{{backButtonText}}
</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}}
</button>
<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.isLastStep = false
}
},
finish () {
this.$emit('on-complete')
}
},
mounted () {