Steppy
A customizable Stepper component for Vue 3
Demo • Key Features • How To Use • Dependencies • License
Demo
You can try a live demo here
Key Features
- Keep track of current step
- Change step content
- Configure finalization
- Show loading spinner
- Typescript support
- Customizable
- Colors
- Titles
- Icons
- Button text
- Circle size
How To Use
Install
$ npm install vue3-steppyImport
import {Steppy} from 'vue3-steppy'For an implementation example, see the App.vue file in the repository.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
step |
Number | 1 |
The current step number. |
tabs |
Array | [] |
Array of step objects with titles and flags for validity and success icons. |
finalize |
Function | () => {} |
Function to call when the final step is completed. |
backText |
String | "Back" |
Text displayed on the back button. |
nextText |
String | "Next" |
Text displayed on the next button. |
doneText |
String | "Done" |
Text displayed on the done button. |
loading |
Boolean | false |
Indicates whether the final step is in a loading state. |
primaryColor1 |
String | "orange" |
Primary color for the stepper's theme. |
primaryColor2 |
String | "#fff" |
Secondary color for the stepper's theme. |
backgroundColor |
String | "#fff" |
Background color for the stepper. |
circleSize |
Number | 68 |
Size of the circles in the step indicators. |
Dependencies
This software uses the following open source packages:
Dev Dependencies
License
GitHub Laximas ·