vue-wizard-steps
Lightweight and customizable step-by-step progress/wizard component for Vue.
Step 1: Installation
yarn add vue-wizard-steps
Step 2: Add to project
import Vue from 'vue';
import WizardSteps from 'vue-wizard-steps';
import App from './App.vue';
Vue.component("wizard-steps", WizardSteps);
new Vue({
render: h => h(App),
}).$mount('#app');
Step 3: Use component in view
<template>
<wizard-steps :sections="sections" :bgColor="bgColor" :fillColor="fillColor" />
</template>
<script>
export default {
data() {
return {
sections: {
titles: ['summary', 'shipping', 'payment', 'checkout'],
fillCount: 2
},
bgColor: '#E4F5B8',
fillColor: '#1F01B9'
};
}
}
</script>
That's all.
Props
| Prop name | Type | Description | Required |
|---|---|---|---|
| sections | Object | Object that contains progress bar settings | yes |
| sections.titles | Array | String array that represents step titles | yes |
| sections.fillCount | Number | Filled step count | yes |
| bgColor | String | Background color of progress bar as hexadecimal | no |
| fillColor | String | Color of filled bars on progress as hexadecimal | no |
