JSFiddle - React, Tailwind, and code Playground
by CristiJ
HTML
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
<div id="app">
<div>
<form-wizard @on-complete="onComplete" step-size="xs">
<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>
<form-wizard @on-complete="onComplete" step-size="sm">
<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>
<form-wizard @on-complete="onComplete" step-size="md">
<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">
...
JavaScript
Vue.use(VueFormWizard)
new Vue({
el: '#app',
methods: {
onComplete: function(){
alert('Yay. Done!');
}
}
})