# Steps 步骤条

参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/basic/steps" target="_blank">Mand Mobile - Steps</a>

## 基础用法


::: snippet 设置`steps`步骤

```html
<template>
  <div>
    <zui-steps :steps="steps"></zui-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { name: '登录/注册' },
        { name: '申请征信报告' },
        { name: '提取征信报告' },
      ],
    }
  } 
}
</script>
```

:::

## 纵向展示

::: snippet 设置`direction`为**vertical**

```html
<template>
  <div style="width: 400px;">
    <zui-steps :steps="steps" direction="vertical"></zui-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { name: '登录', text: '这是登录的描述' },
        { name: '开通', text: '这是开通的描述' },
        { name: '验证', text: '这是验证的描述' },
        { name: '成功', text: '这是成功的描述' },
      ],
    }
  } 
}
</script>
```

:::

## API

## Attribute 属性
参数|说明|类型|可选值|默认值
-|-|-|-|-
steps | 步骤信息数组 | Array<{name, text}> | - | -
current | 当前步骤/进度 | Number | 支持小数 | 0
direction | 展示方向 | String | horizontal, vertical | horizontal
transition | 进度变化动效 | Boolean | - | false
vertical-adaptive | 步骤高度自适应 | Boolean | - | false