# Steps 步骤条 0.7.0+

A step-by-step navigation bar that guides users to complete tasks in accordance with the process. The steps can be set according to the actual application scenario. The steps must be at least 2 steps.

# Basic usage

Simple steps.

Set the active property, accept a Number, indicating the index of the step, starting from 0

<template>
  <ve-steps :active="active" class="step-box">
    <ve-step class="step-li" title="Apple">Set Apple</ve-step>
    <ve-step class="step-li" title="Firefox">Set Firefox</ve-step>
    <ve-step class="step-li" title="Google">Set Google</ve-step>
    <ve-step class="step-li" title="Success">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

# Step bar with icon

A variety of custom icons can be used in the step bar.

Set the icon through the icon property, the color of the icon follows the color of the text

<template>
  <ve-steps :active="active" class="step-box">
    <ve-step class="step-li" icon-style="brands" title="Apple" icon="apple">Set Apple</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Firefox" icon="firefox">Set Firefox</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Google" icon="google">Set Google</ve-step>
    <ve-step class="step-li" title="Success" icon="check">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

# Set steps direction

Change the position of the title

By setting the placement to control the position of the navigation bar, it supports three values: left, right, top

<template>
  <ve-steps :active="active" placement="right" class="step-box">
    <ve-step class="step-li" icon-style="brands" title="Apple" icon="apple">Set Apple</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Firefox" icon="firefox">Set Firefox</ve-step>
    <ve-step class="step-li" icon-style="brands" title="Google" icon="google">Set Google</ve-step>
    <ve-step class="step-li" title="Success" icon="check">Success</ve-step>
    <template #footer>
      <ve-button type="primary" @click="handlerPrev" v-show="active !== 0 && active !== 3">Previous</ve-button>
      <ve-button type="primary" @click="handlerNext" :loading="loading" v-show="active !== 3">Next step</ve-button>
      <ve-button type="primary" @click="handlerSuccess" v-show="active === 3">Complete</ve-button>
    </template>
  </ve-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      loading: false
    }
  },
  methods: {
    sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms)
      })
    },
    handlerPrev() {
      this.active--
    },
    async handlerNext() {
      this.loading = true
      await this.sleep((Math.random() * 2000 + 100) | 0)
      this.loading = false
      this.active++
    },
    handlerSuccess() {

    }
  }
}
</script>

# Steps Attributes

Parameter	Description	Type	Optional value	Defaults
active	Set the current activation step	number	-	0
placement	Set navigation bar position	string	left / right / top	left
nav-class-name	Set the class name of the navigation bar	string	-	-

# Step Attributes

Parameter	Description	Type	Optional value	Defaults
title	Set the title of the step bar	string	-	-
icon	Set the icon to the left of the step bar	string	-	-
icon-style	Set the `icon` icon style details	string	brands / regular / solid	solid

← IP / Subnet 输入框 Message 信息提示 →