# 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

# 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>