simple-vue-stepper

The component source code took from: https://github.com/adi518/vue-stepper
and modify style to look alike Bootstrap

Install

``
npm i simple-vue-stepper
`

Usage

To use the component in your templates, simply import and register with your component. To control the Stepper state, we use the v-model directive, just like on any other input element with two-way binding.

Template
`js







Previous
Next
Reset
`

Script
`js
import { VStepper } from 'vue-stepper-component'

export default {
components: {
VStepper
},
data: () => ({ steps: 3, step: undefined })
}
`


Props


`js
/**
* Contains the current step value. Very similar to a
* value attribute on an input. In most cases, you'll want
* to set this as a two-way binding, using the v-model directive.
* @type {Number||undefined||null}
*/
value: {
type: Number,
default: 1
},

/**
* Contains the steps count.
* @type {Number}
*/
steps: {
type: Number,
default: 0
},

/**
* Sets up the Stepper in either
* linear or random mode.
* @type {Boolean}
*/
linear: {
type: Boolean,
default: false
},

/**
* Sync state with storage?
* @type {Boolean}
*/
persist: {
type: Boolean,
default: false
},

/**
* Which Storage API to use.
* Should be used with persist prop.
* @type {String}
*/
storekeeper: {
type: String,
default: 'localStorage',
validator(value) {
return ['localStorage', 'sessionStorage'].includes(value)
}
},

/**
* Add/Remove a divider to/from each Step component.
* @type {Boolean}
*/
withDivider: {
type: Boolean,
default: true
},

/**
* Steps wrapper component.
* @type {Object}
*/
rootComponent: {
type: Object,
default: () => VStepperRoot
},

/**
* Sets up debug mode, which reveals
* the actual radio-button behind each step.
* @type {Boolean}
*/
debug: {
type: Boolean,
default: false
}
`

Project setup


`
npm install
`

$3

`
npm run serve
`

$3

`
npm run build-lib
`

$3

`
npm run lint
`