Step Progress Indicator In Vue

Description:

A simple yet customizable step progress indicator that can be used to indicate available steps in situations where the user has to fill a multi-step form.

How to use it:

1. Import and register the component.

import VueStepProgressIndicator from "vue-step-progress-indicator";
components: {
  VueStepProgressIndicator,
},

2. Add the component to the template define your own steps as follows:

<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. Available component props.

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

4. Events.

  • @onStepChanged: Triggered after a step changes
  • @onEnterFinalStep: Triggered when the user is on the last step

Preview:

Step Progress Indicator In Vue

Download Details:

Author: pokhrelashok

Live Demo: https://pahadiashok.com.np/vue-step-progress-indicator/

Download Link: https://github.com/pokhrelashok/vue-step-progress-indicator/archive/refs/heads/main.zip

Official Website: https://github.com/pokhrelashok/vue-step-progress-indicator

Install & Download:

# NPM
$ npm i vue-step-progress-indicator

You Might Be Interested In:

Add Comment