https://github.com/egoist/vue-step-indicator

👣 Simple step indicator for Vue.js
https://github.com/egoist/vue-step-indicator

Last synced: 12 days ago
JSON representation

👣 Simple step indicator for Vue.js

• Host: GitHub
• URL: https://github.com/egoist/vue-step-indicator
• Owner: egoist
• Created: 2018-03-23T08:26:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T19:10:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T11:22:25.635Z (about 1 month ago)
• Language: Vue
• Homepage: https://vue-step-indicator.egoist.sh
• Size: 1.34 MB
• Stars: 92
• Watchers: 6
• Forks: 10
• Open Issues: 29
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-step-indicator

[![NPM version](https://img.shields.io/npm/v/vue-step-indicator.svg?style=flat)](https://npmjs.com/package/vue-step-indicator) [![NPM downloads](https://img.shields.io/npm/dm/vue-step-indicator.svg?style=flat)](https://npmjs.com/package/vue-step-indicator) [![CircleCI](https://circleci.com/gh/egoist/vue-step-indicator/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-step-indicator/tree/master)

Simple step indicator for Vue.js

## Install

```bash

yarn add vue-step-indicator

```

CDN: [UNPKG](https://unpkg.com/vue-step-indicator/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-step-indicator/dist/) (available as `window.StepIndicator`)

## Usage

👉👀 [Check out the demo!](https://vue-step-indicator.egoist.sh)

```vue

  

import StepIndicator from 'vue-step-indicator'

export default {

  components: {

    StepIndicator

  }

}

```

## API

### Props

|Prop|Type|Default|Description|

|---|---|---|---|

|current|number|(Required)|Index of current step|

|total|number|(Required)|Total steps|

|currentColor|string|`'rgb(68, 0, 204)'`|Color of current step|

|defaultColor|string|`'rgb(130, 140, 153)'`|Default color of each step|

|handleClick|function||Triggered when an indicator is clicked|

## License

MIT © [EGOIST](https://github.com/egoist)