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-steppy
Import
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
MIT
GitHub Laximas ·