This is a simple step progress indicator. You can define how many steps your project has, and can indicate the active step.
npm install vue-step-progress-indicatorbash
npm install --save vue-step-progress-indicator
`
Usage
$3
Import the component, register the component and you are good to go!
`js
import VueStepProgressIndicator from "vue-step-progress-indicator";
// register as component
components: {
VueStepProgressIndicator,
},
`
$3
`js
:steps="[
'Add invites',
'Set Up',
'Select Template',
'Send Invitations',
'Done',
]"
:active-step="0"
:is-reactive="true"
@onStepChanged="onStepChanged"
@onEnterFinalStep="onEnterFinalStep"
/>
`
$3
| Name | Type | Usage |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| steps | Array | Indicates a list of labels to be displayed for each step |
| active-step | Number | Indicates the currently active step |
| is-reactive | Boolean | If true, the progress bubbles will be clickable, and events will be emitted on user click |
| reactivity-type | String | If is-reactive is true, this can be used to define which step indicators the user can click. Values that can be passed are: all, backward, forward, single-step. All will make all the indicators clickable, backward will be only clicking previous steps possible, forward will make only forward buttons clickable, single-step will make one step backward and forward clickable |
| show-label | Boolean | If true, labels will be displayed |
| show-bridge | Boolean | If true, the bridges will be displayed (bridges will be displayed on small devices, irrespective of this) |
| show-bridge-on-small-devices | Boolean | If false, the bridges will be hidden even on smaller devices |
| styles | Object | Provide custom style for various UI components |
| colors | Object | Provide colors for various UI components |
$3
| Name | Usage |
| ---------------- | ----------------------------------------------------------- |
| onStepChanged | Fired if is-reactive is true, and user clicks on some step |
| onEnterFinalStep | Fired if is-reactive is true, and user is on the final step |
$3
This package has been created by taking your customization needs in mind. You can not only provide colors for components for different states (active, inactive and completed), you can do custom styling for each component in the UI. Here is an example.
`js
// this is the default style being used in the package
// set this as data in the parent component
styleData: {
progress__wrapper: {
display: "-ms-flexbox",
display: "flex",
flexWrap: "wrap",
display: "flex",
justifyContent: "flex-start",
margin: "1rem 0",
},
progress__block: {
display: "flex",
alignItems: "center",
},
progress__bridge: {
backgroundColor: "grey",
height: "2px",
flexGrow: "1",
width: "20px",
},
progress__bubble: {
margin: "0",
padding: "0",
lineHeight: "30px",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "30px",
width: "30px",
borderRadius: "100%",
backgroundColor: "transparent",
border: "2px grey solid",
textAlign: "center",
},
progress__label: {
margin: "0 0.8rem",
},
}
// use above data as prop
:styles="styleData"
/>
`
You may also want to customize the colors of components. The progress bubbles can have one of three states, active, inactive & completed. You can set color, backgroundColor, borderColor for each component. You can pass colors for each component as:
`js
// this is the default colors being used in the package
// set this as data in the parent component
colorData: {
progress__bubble: {
active: {
color: "#fff",
backgroundColor: "#e74c3c",
borderColor: "#e74c3c",
},
inactive: {
color: "#fff",
backgroundColor: "#34495e",
borderColor: "#34495e",
},
completed: {
color: "#fff",
borderColor: "#27ae60",
backgroundColor: "#27ae60",
},
},
progress__label: {
active: {
color: "#e74c3c",
},
inactive: {
color: "#34495e",
},
completed: {
color: "#27ae60",
},
},
progress__bridge: {
active: {
backgroundColor: "#e74c3c",
},
inactive: {
backgroundColor: "#34495e",
},
completed: {
backgroundColor: "#27ae60",
},
},
},
// use above data as prop
:colors="colorData"
/>
``