vuejs-stepper

Simple stepper component for vuejs
1,793 5
Install
npm install vuejs-stepper
Latest Version:0.2.4
Vue:2
Last Updated:Nov 26, 2019
Links: GitHub  ·  npm
Maintainer: tjohnn

VueJs Stepper

Simple stepper component for vuejs

Vuejs Stepper In Action

Requirements

Installation

npm

$ npm install vuejs-stepper

Usage

<template>
    <stepper :options="stepperOptions">
        <div slot="step-1">
            <h3>Step 1</h3>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque 
        </div>
        
        <div slot="step-2">
            <h3>Step 2</h3>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque 
        </div>
        
        <div slot="step-3">
            <h3>Step 3</h3>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque 
        </div>
        
        <div slot="custom-step-name">
            <h3>Step 4</h3>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque 
        </div>
    </stepper>
</template>

<script>
import Stepper from 'vuejs-stepper'
export default {
  components: { Stepper },
  data () {
    return {
      stepperOptions: {
        headers: [
          {title: 'Title One'},
          {title: 'Title Two'},
          {title: 'Title Three'},
          {title: 'Title Four', stepName: 'custom-step-name'}
        ],
        prevText: 'Previous',
        nextText: 'Next'
      }
    }
  }
};
</script>

Todo

  • Color customization
  • Allow changing of current step

License

The MIT License

Related Packages

vue-stepper

Vue Stepper

29,029 365
vue3-stepper

A Stepper Component for Vue3

1,185 0
@md-plugins/md-plugin-steps

A markdown-it plugin for rendering wizard-like numbered step blocks.

5,161 4

Version History

Version Released Vue License
0.2.4 ^2.3.3
0.2.3 ^2.3.3
0.2.2 ^2.3.3
0.2.1 ^2.3.3
0.2.0 ^2.3.3