Vue Step Progress Bar
A simple Vue component that displays a Progress Bar with labels for each step.
Install the plugin with npm:
npm install –save vue-step-progress
⚠️ The default settings use Font Awesome for the checkmark icon. You can change the css icon class by using the
Add the Library import in the components you want to use the progress bar in:
import StepProgress from ‘vue-step-progress’;
// import the css (OPTIONAL – you can provide your own design)
// register the component in your Vue instance
Put the step-progress element into your HTML where you want the Component to appear and pass the steps Array Prop
and the current-step Number prop.
<step-progress :steps=”mySteps” :current-step=”currentStep” icon-class=”fa fa-check”></step-progress>
A string array of all steps to be displayed. The Strings will be present as labels in the component. Example:
[‘Step 1’, ‘Step 2’, ‘Step 3’]
A simple Number prop that defines the index of the active step. Example:
The css class of the checkmark icon. Default:
A String prop that defines the active step color. It is red by default. Example:
A String prop that defines the passive step color. It is gray by default. Example:
A Number prop that defines the active step thickness. It is 5 by default. Example:
A Number prop that defines the passive step thickness. It is 5 by default. Example:
A Number prop that defines the line thickness. It is 12 by default. Example:
It is recommended to develop and build inside a docker container. start.sh is a convenience script to help you with that.
To start a development server, execute:
This will setup a new docker container, install npm dependencies and start the development server under http://localhost:3000
Document all user-visible changes in the “Unreleased” section in CHANGELOG.MD.
Publishing (maintainer only)
In order to rebuild the files for publishing a new version on npm, execute this command:
Create a the .npmrc file: