Steppy is a simple stepper component that helps users keep track of the progress they are making through a form, process, or sequence of steps.
How to use it:
1. Import the Steppy component.
import {Steppy} from 'vue3-steppy'
2. Add steps to the Steppy component.
<Steppo v-model:step="step"> <template #1> <!-- Step 1 --> </template> <template #2> <!-- Step 2 --> </template> <template #3> <!-- Step 3 --> </template> ... </Steppo>
3. Available component props.
step: { type: Number, default: 1, }, tabs: { type: Array, default: reactive([ { title: "Step 1", iconSuccess: null, isValid: true, }, { title: "Step 2", iconSuccess: null, isValid: true, }, { title: "Step 3", iconSuccess: null, isValid: true, }, ]), }, finalize: { type: Function, default: function () { return {}; }, }, backText: { type: String, default: "Back", }, nextText: { type: String, default: "Next", }, doneText: { type: String, default: "Done", }, primaryColor1: { type: String, default: "orange", }, primaryColor2: { type: String, default: "#C5C5C5", },
Preview:
Changelog:
v1.2.1 (09/03/2023)
- Add circle size adjustment
v1.1.0 (02/12/2023)
- Add loading spinner on done button
v1.0.2 (02/04/2023)
- Better CSS
Download Details:
Author: Laximas
Live Demo: https://laximas.github.io/vue3-steppy/
Download Link: https://github.com/Laximas/vue3-steppy/archive/refs/heads/main.zip
Official Website: https://github.com/Laximas/vue3-steppy
Install & Download:
# NPM
$ npm i vue3-steppy