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:

• Vue 3

Dev Dependencies

• Vite
• Typescript
• sass
• Eslint
• Prettier
• gh-pages
• CssInjectedByJs

License

MIT

GitHub Laximas  ·