Stepper component designed to guide users through a multi-step process, like a registration form or setup process. It provides a clear indication of the current, completed, and upcoming steps, and also allows for navigating between these steps.
Install it from npm
npm install vue-simple-stepper
You need to import the component doing:
import VueSimpleStepper from 'vue-simple-stepper'
And its styles like this:
import "vue-simple-stepper/dist/style.css";
The easiest way to use is to copy and throw this in your code:
Any element found in the default slot of the component will be automatically added to the stepper. Notice that the steps data prop number coincides with the number of elements in the stepper.
You can set a default starting point of the component with the step prop. With it you can also control the stepper programmatically.
Any time the actions of the stepper are clicked the events:
One common problem is the customization of the stepper to fit the framework or styles of choice. In that case you can do it by using the CSS variables:
Or in case you want to further customize the buttons you can overwrite or extend these classes:
In case that you need to overwrite completely the action buttons do it by using the actions slot like so: