# Steps 步骤条

说明

## 基础用法

说明

::: snippet 示例

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

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

:::

## 纵向展示

说明

::: snippet 示例

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

:::