1. vuegress-bar

vuegress-bar

vuegress-bar

Lightweight progress-bar component for Vue.

Step 1: Installation

yarn add vuegress-bar

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 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