# Steps 步骤条
---
#### 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。
### 基础用法
使用```current```来指定当前进行的步骤，默认从```0```开始计数

<div class="demo-block">
    <y-steps current="1">
      <y-step title="已完成" ></y-step>
      <y-step title="步骤2" ></y-step>
      <y-step title="步骤3" ></y-step>
       <y-step title="步骤4" ></y-step>
    </y-steps>
</div>

::: demo

```html
<div>
    <y-steps current="1" >
      <y-step title="已完成" ></y-step>
      <y-step title="步骤2" ></y-step>
      <y-step title="步骤3" ></y-step>
      <y-step title="步骤4" ></y-step>
    </y-steps>
</div>
```
:::

### 状态用法
使用```status```来指定当前进行的步骤的状态

<div class="demo-block">
    <y-steps current="2" status="error">
      <y-step title="已完成" ></y-step>
      <y-step title="已完成" ></y-step>
      <y-step title="错误" ></y-step>
      <y-step title="步骤4" ></y-step>
    </y-steps>
</div>

::: demo

```html
<div>
    <y-steps current="2" status="error">
       <y-step title="已完成" ></y-step>
      <y-step title="已完成" ></y-step>
      <y-step title="错误" ></y-step>
      <y-step title="步骤4" ></y-step>
    </y-steps>
</div>
```
:::

### 按钮点击用法

<div class="demo-block">
  <y-steps :current="current">
    <y-step title="步骤1"></y-step>
    <y-step title="步骤2"></y-step>
    <y-step title="步骤3"></y-step>
    <y-step title="步骤4"></y-step>
  </y-steps>
  <br/>
  <y-button @click="step('next')" type="default">下一步</y-button>

</div>

<script>
  export default{
    data(){
      return{
        current: 0,
      }
    },
    methods:{
      step(t) {
        this.current = t == 'next' ? (this.current >= 3 ? 3 : this.current + 1) : (this.current <= 0 ? 0 : this.current - 1)
      },
    }
  }
</script>

::: demo

```
<div>
  <y-steps :current="current">
    <y-step title="步骤1"></y-step>
    <y-step title="步骤2"></y-step>
    <y-step title="步骤3"></y-step>
    <y-step title="步骤4"></y-step>
  </y-steps>
  <br/>
  <y-button type="gray" @click="step(prev)">上一步</y-button>
  <y-button type="default" @click="step(next)">下一步</y-button>
</div>

<script>
  export default{
    data(){
      return{
        current: 0,
      }
    },
    methods:{
      step(t) {
        this.current = t == 'next' ? (this.current >= 3 ? 3 : this.current + 1) : (this.current <= 0 ? 0 : this.current - 1)
      },
    }
  }
</script>

```
:::




### y-steps 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| current      | 步骤说明     | String,Number    |0,1,2,3,4  |  0  |
| status  | 进行中的状态 | String   | progress,success,error   | progress   |

### y-step 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| title     | 名称     | String    | - |  -  |