1.0.7 • Published 3 years ago

vue-wizard-steps v1.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vuegrass-bar gif

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  VuegressBar  from  'vuegress-bar';
import  App  from  './App.vue';

Vue.component("vuegress-bar", VuegressBar);

new  Vue({
    render: h => h(App),
}).$mount('#app');

Step 3: Use component in view

<template>
	<vuegress-bar :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 nameTypeDescriptionRequired
sectionsObjectObject that contains progress bar settingsyes
sections.titlesArrayString array that represents step titlesyes
sections.fillCountNumberFilled step countyes
bgColorStringBackground color of progress bar as hexadecimalno
fillColorStringColor of filled bars on progress as hexadecimalno