Step-by-step Progress Indicator Accessibility In Vue

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.

Need a step-by-step indicator for advanced VUE progression? No problem, this bundle has you covered. This is highly customizable so you can provide the theme and design you want.

Must Read – Framework for Progress Forms Steps | jQuery-Form-Slider

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 {};
  },
},

Must Read – Step by Step Bar Chart Created Using Vanilla Javascript

Props

NameTypeUsage
stepsArrayIndicates a list of labels to be displayed for each step
active-stepNumberIndicates the currently active step
is-reactiveBooleanIf true, the progress bubbles will be clickable, and events will be emitted on the user’s click
reactivity-typeStringIf 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, and 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 take one step backward and forward clickable
show-labelBooleanIf true, labels will be displayed
show-bridgeBooleanIf true, the bridges will be displayed (bridges will be displayed on small devices, irrespective of this)
show-bridge-on-small-devicesBooleanIf false, the bridges will be hidden even on smaller devices
stylesObjectProvide custom style for various UI components
colorsObjectProvide colors for various UI components

Events

NameUsage
onStepChangedFired if is-reactive is true, and the user clicks on some step
onEnterFinalStepFired if is-reactive is true, and the user is on the final step

Vue Step Progress Indicator Plugin/Github, multi step progress bar javascript

Read More – 

A Simple Bootstrap 4 Steps Plugin | Bootstrap Steps
JavaScript Library for Guiding Users Through Your App | shepherd


See Demo And Download

Official Website(pokhrelashok): Click Here

This superior jQuery/javascript plugin is developed by pokhrelashok. For extra Advanced Usage, please go to the official website.

Share