Easy Step Indicator In Vue.js

Description:

An easy yet configurable step indicator for Vue.js applications.

Useful for step-by-step form wizard that indicates on which step you’re viewing.

How to use it:

1. Install and import the component.

import StepIndicator from 'vue-step-indicator';
import './src/style.css';

2. Register the component.

export default {
  components: {
    StepIndicator
  }
}

3. Create a basic step indicator in your template and specify the current step & total amount of steps.

<template>
  <step-indicator :current="1" :total="5"></step-indicator>
</template>

4. Customize the step colors using the following props.

  • currentColor: The color of the current steop, default: ‘rgb(68, 0, 204)’.
  • defaultColor: Default: ‘rgb(130, 140, 153)’.

5. Execute a function when a step is clicked.

handleClick: () => {}

Download Details:

Author: egoist

Live Demo: https://vue-step-indicator.egoist.sh/

Download Link: https://github.com/egoist/vue-step-indicator/archive/master.zip

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

Last Update: November 21, 2019

Install:

# NPM
$ npm install vue-step-indicator --save

You Might Be Interested In:

Add Comment