Steps
A navigation bar helps users complete tasks through the process and displays the current step
Import
import { Steps } from 'mand-mobile-next'
Vue.createApp().component(Steps.name, Steps)
Code Examples
API
Steps Props
Props | Description | Type | Default | Note |
---|---|---|---|---|
steps | array of step information | Array<{name, text}> | - | - |
current | current step | Number | 0 | support for decimal point |
direction | to specify the direction of the step bar | String | horizontal | horizontal , vertical |
transition | progress change transition | Boolean | false | - |
vertical-adaptive | step height adaptive | Boolean | false | only for vertical , if set to true then adaptive according to container height, setting .mfe-steps height is necessary |
Steps Slots
icon
Unify custom step icons, and the scoped slot
is supported as follows:
<template slot="reached" slot-scope="{ index, currentIndex }">
<b v-if="props.index === props.currentIndex">{{ props.index }}</b>
<span v-else>{{ props.index }}</span>
</template>
reached
Slot of step icon that has been completed, generally used to customize the completed step icon, and the scoped slot
is supported as follows:
<template slot="reached" slot-scope="{ index }">
<!-- Custom icon if the index value is 1 -->
<md-icon name="checked" v-if="index === 1"></md-icon>
<!-- Default step icon -->
<div class="step-node-default" v-else></div>
</template>
current
Slot of current step icon, generally used to customize the current step icon, supports scoped slot
and has the same usage as reached
unreached
Slot of unreached step icon, generally used to customize the unreached step icon, supports scoped slot
and has the same usage as reached
content
slot of step content
<template
slot="content"
slot-scope="{ index, step }"
>
<!-- index step index -->
<!-- step step data -->
</template>