vue-easy-wizard
🚀 Welcome to vue-easy-wizard!
Obs: Have bootstrap support :grin:
Install Package
npm i -S vue-easy-wizard
Install Plugin Vue
import Wizard from 'vue-easy-wizard';
import 'vue-easy-wizard/dist/Wizard.css';
Vue.use(Wizard);
Basic Usage
<Wizard>
<WizardItem :back-button="false" title="Wizard" subtitle="Step 1">
<h1> You are on the step One </h1>
<button @click="$emit('wizard:next');">
Next
</button>
</WizardItem>
<WizardItem title="Wizard" subtitle="Step 2">
<h1> You are on the step Two </h1>
<button @click="$emit('wizard:next');">
Next
</button>
</WizardItem>
<WizardItem title="Wizard" subtitle="Step 3">
<h1> You are on the step Three </h1>
<button @click="$emit('wizard:next');">
Next
</button>
</WizardItem>
<WizardItem :back-button="false" subtitle="Step 4">
<h1> You are on the step Four </h1>
<h5> But now let's go back to the previous step </h5>
<button @click="$emit('wizard:prev');">
prev
</button>
</WizardItem>
</Wizard>
Events
- To next Step:
$emit('wizard:next');
- To prev Step:
$emit('wizard:prev');
WizardItem Options
- title (required)
<WizardItem title="Wizard">
</WizardItem>
- subtitle
<WizardItem subtitle="step 1">
</WizardItem>
- Enable/Disable Back Button (true/false)
<WizardItem :back-button="false">
</WizardItem>
Dependencies
@babel/core: ^7.6.4@babel/plugin-transform-runtime: ^7.6.2@babel/preset-env: ^7.6.3@fortawesome/fontawesome-free-solid: ^5.0.13@fortawesome/fontawesome-svg-core: ^1.2.19@fortawesome/free-brands-svg-icons: ^5.9.0@fortawesome/free-regular-svg-icons: ^5.9.0@fortawesome/free-solid-svg-icons: ^5.9.0@fortawesome/vue-fontawesome: ^0.1.6babel-loader: ^8.0.6babel-plugin-syntax-dynamic-import: ^6.18.0css-loader: ^3.2.0html-webpack-plugin: ^3.2.0mini-css-extract-plugin: ^0.8.0node-sass: ^4.12.0optimize-css-assets-webpack-plugin: ^5.0.3sass-loader: ^7.1.0sass-resources-loader: ^2.0.1style-loader: ^1.0.0uglifyjs-webpack-plugin: ^2.2.0vue-template-compiler: ^2.6.10webpack: ^4.41.2webpack-cli: ^3.3.9webpack-dev-server: ^3.9.0