vue-step
基于Vue.js的移动端步骤导航组件 Mobile Step Navigation Component Based On Vue.js
Installation
npm i vue-step -S
API
Param | Description | Type | Default |
---|---|---|---|
now-step | The current step, The starting value is 1. | Number |
- |
step-list | Name of all steps | Array |
- |
active-color | Active status color | String |
'#1fb11d' |
style-type | You can set 'style1' or 'style2' | String |
'style1' |
direction | You can set 'horizontal' or 'vertical' | String |
'horizontal' |
@selected | Event issued when an item is selected / clicked | Event |
- |
Usage
# example<template><div id="app"><vue-step :now-step="nowStep" :step-list="stepList"></vue-step></div></template><script>import vueStep from 'vue-step'export default {name: 'app',data () {return {nowStep: 2,stepList: ['First Step','Second Step','Third Step','Four Step']}},components: {vueStep}}</script>
Demo Screenshot
License
MIT