Skip to content

Laximas/vue3-steppy

Repository files navigation

Steppy

A customizable Stepper component for Vue 3

npm version

DemoKey FeaturesHow To UseDependenciesLicense

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  ·