Vue Step Progress Indicator is a simple and highly customizable step progress indicator that can be used to indicate available steps in situations where the user has to fill out a multi-step form.
step progress indicator flutter, step progress bar bootstrap, step-by-step indicator accessibility, responsive step-progress bar vue horizontal step progress bar
Modal Dialog with Bootstrap Loading Progress Bar | waitingFor
How to make use of it:
Install and download:
# NPM $ npm i vue-step-progress-indicator
1. Import and register the component.
import VueStepProgressIndicator from "vue-step-progress-indicator";
components: {
VueStepProgressIndicator,
},2. Add the component to the template and define your steps as below:
<vue-step-progress-indicator
:steps="[
'Step 1',
'Step 2',
'Step 3',
'Step 4',
'Done',
]"
:active-step="0"
:is-reactive="true"
@onStepChanged="onStepChanged"
@onEnterFinalStep="onEnterFinalStep"
/>3. Component props available.
steps: {
type: Array,
required: true,
},
activeStep: {
type: Number,
required: true,
},
isReactive: {
type: Boolean,
required: false,
default: false,
},
reactivityType: {
type: String,
required: false,
default: "all",
validator: (propValue) => {
const types = ["all", "backward", "forward", "single-step"];
return types.includes(propValue);
},
},
showLabel: {
type: Boolean,
required: false,
default: true,
},
showBridge: {
type: Boolean,
required: false,
default: false,
},
showBridgeOnSmallDevices: {
type: Boolean,
required: false,
default: true,
},
colors: {
type: Object,
required: false,
default: function () {
return {};
},
},
styles: {
type: Object,
required: false,
default: function () {
return {};
},
},Props
| 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 |
Events
| 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 |
Vue Step Progress Indicator Plugin/Github, multi step progress bar javascript
See Demo And Download
Official Website(pokhrelashok): Click Here
This superior jQuery/javascript plugin is developed by pokhrelashok. For extra Advanced Usages, please go to the official website.
