vue3-stepper

v0.1.0

A Stepper Component for Vue3

vue3 stepper line-step

Readme Versions Dependencies Scripts

vue3-stepper

A Stepper Component for Vue3

How to use

install

npm i ue3-stepper --save

import to your project

<template>
    <Stepper 
    v-model="num"
    :steps="steps"
    :max="3"
    />
</template>
<script setup>
    import Stepper from 'vue3-stepper/Stepper.vue'
    const num = ref(0)
    const steps = reactive([{text:'1',label:'One'},{text:'2',label:'Two'}])
</script>

props

keyName	type	required	default value	description
steps	<{text,label}>Array	true		the data to gen every step
activeColor	string	false	#AD0CD3	color for current step item
inActiveColor	string	false	#F6F6F6	color for other step item
progressPadding	string	false	70px	the distance one the side
max	number	false		maxium step count
vaildator	function	false		return true will allow next