# SuSteps 步骤条。
> 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

## 导入使用
```code[javascript]
import SuSteps from "ss-universal-client-web/comp/widget/su-steps";
```

### 基础用法
> 简单的步骤条。
   

:::demo 
```html
<template>
    <su-steps 
        :activeIndex="activeIndex" 
        :finishStatus="finishStatus"
        :direction="direction"
        :stepsListTitle="stepsListTitle"
        @next="next"
        @click-item="clickItem"
    ></su-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
         
</template>
<script>
// import SuSteps from "ss-universal-client-web/comp/widget/su-steps"
export default {
    data(){
        return {
            activeIndex: 0,
            finishStatus:'success',
            direction: 'horizontal',
            stepsListTitle:[
                {title: '步骤一'},
                {title: '步骤二'},
                {title: '步骤三'},
            ],
            
        }
    },
    components:{
        SuSteps
    },
    methods: {
        clickItem(index) {
            this.activeIndex = index;
        },
        next() {
            if (this.activeIndex++ > 2){
                console.log("已完成")
                return;
            }
        }
    }
};
</script>
```
:::
### 有描述的步骤条
> 居中显示，并且每个步骤有其对应的步骤状态描述。

:::demo 
```html
<template>
    <su-steps 
        :activeIndex="activeIndex" 
        :alignCenter="alignCenter"
        :stepsListTitle="stepsListTitle"
    ></su-steps>
</template>
<script>
// import SuSteps from "ss-universal-client-web/comp/widget/su-steps"
export default {
    data(){
        return {
            activeIndex: 1,
            alignCenter: true,
            stepsListTitle:[
                {title: '步骤一',description:'描述描述描述'},
                {title: '步骤二',description:'描述描述描述'},
                {title: '步骤三',description:'描述描述描述'},
            ]               
        }
    },
    components:{
        SuSteps
    },
    methods: {
    }
};
</script>
```
:::
### 竖式步骤条
:::demo 
```html
<template>
    <div style="height: 300px">
        <su-steps 
                :activeIndex="activeIndex" 
                :direction="direction"
                :stepsListTitle="stepsListTitle"
        ></su-steps>
    </div>
    
</template>
<script>
// import SuSteps from "ss-universal-client-web/comp/widget/su-steps"
export default {
    data(){
        return {
            activeIndex: 1,
            direction: 'vertical',
            stepsListTitle:[
                {title: '步骤一'},
                {title: '步骤二'},
                {title: '步骤三',description:'描述描述描述'},
            ]               
        }
    },
    components:{
        SuSteps
    },
    methods: {
    }
};
</script>
```
:::
### 简洁风格的步骤条
> 设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效

:::demo 
```html
<template>
    <su-steps 
            :activeIndex="activeIndex"
            :finishStatus="finishStatus"   
            :simple="simple"
            :stepsListTitle="stepsListTitle"
            @next="next"
    ></su-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</template>
<script>
// import SuSteps from "ss-universal-client-web/comp/widget/su-steps"
export default {
    data(){
        return {
            activeIndex: 1,
            direction: 'vertical',
            finishStatus:'success',
            simple: true,
            stepsListTitle:[
                {title: '步骤一'},
                {title: '步骤二'},
                {title: '步骤三'},
            ]               
        }
    },
    components:{
        SuSteps
    },
    methods: {
        next() {
            if (this.activeIndex++ > 2){
                console.log("已完成")
                return;
            }
        }
    }
};
</script>
```
:::
### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| direction       | 显示方向 |String  | vertical/horizontal	 | horizontal
| active         | 设置当前激活步骤 |Number | - | 0 |
| align-center        | 进行居中对齐  |Boolean | - |false
| finish-status         | 设置结束步骤的状态 |String | wait / process / finish / error / success | finish |
| simple         | 是否应用简洁风格 |Boolean | - | false |
	
### Events
| 事件      | 说明          | 回调参数      |
|---------- |-------------- |---------- |
| click-item | 单个步骤点击事件 | 当前点击的步骤索引(index)  |