vue3-steppy
Version:
A customizable Vue 3 Stepper plugin
110 lines (85 loc) • 4.44 kB
Markdown
<h1 align="center">Steppy</h1>
<h4 align="center">A customizable Stepper component for Vue 3</h4>
<p align="center">
<a href="https://badge.fury.io/js/vue3-steppy"><img src="https://badge.fury.io/js/vue3-steppy.svg" alt="npm version" height="18"></a>
</p>
<p align="center">
<a href="#demo">Demo</a> •
<a href="#key-features">Key Features</a> •
<a href="#how-to-use">How To Use</a> •
<a href="#dependencies">Dependencies</a> •
<a href="#license">License</a>
</p>
## Demo
You can try a live demo [here](https://laximas.github.io/vue3-steppy/)
## Key Features
* Keep track of current step
* Change step content
* Configure finalization
* Show loading spinner
* Step descriptions/subtitles
* Typescript support
* Customizable
- Colors
- Titles
- Descriptions
- Icons
- Button text
- Circle size
- Content spacing
## How To Use
Install
```bash
$ npm install vue3-steppy
```
Import
```js
import {Steppy} from 'vue3-steppy'
```
For an implementation example, see the [App.vue](./src/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, descriptions, 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. |
| `contentMarginTop` | Number | `60` | Top margin of the content area in pixels. Controls spacing between descriptions and content. |
## Tab Object Structure
Each tab object in the `tabs` array should have the following properties:
| Property | Type | Required | Description |
|---------------|----------|----------|--------------------------------------------------|
| `title` | String | Yes | The title of the step. |
| `description` | String | No | Optional subtitle/description text below title. |
| `isValid` | Boolean | Yes | Whether the step is valid and can proceed. |
| `iconSuccess` | String | No | Optional custom icon URL for completed steps. |
### Example Tab Object
```javascript
{
title: 'Personal Information',
description: 'Enter your details',
isValid: true,
iconSuccess: null
}
```
This software uses the following open source packages:
- [Vue 3](https://vuejs.org)
#### Dev Dependencies
- [Vite](https://vitejs.dev)
- [Typescript](https://www.typescriptlang.org/)
- [sass](https://www.npmjs.com/package/sass)
- [Eslint](https://eslint.org)
- [Prettier](https://prettier.io)
- [gh-pages](https://www.npmjs.com/package/gh-pages)
- [CssInjectedByJs](https://www.npmjs.com/package/vite-plugin-css-injected-by-js)
## License
[MIT](https://github.com/Laximas/vue3-steppy/blob/main/LICENSE.md)
---
> GitHub [Laximas](https://github.com/Laximas) ·