#### 组件名称
gov-steps

#### 解释：
步骤条

#### 属性说明：
|属性名 | 类型 | 必填 | 默认值 |说明 |
|---|---|---|---|---|
|active |Number |是|1|当前步骤|
|color |String |否|#ccc|步骤颜色|
|active-color |String |否|#2b99ff|已完成步骤颜色|
|line-color |String |否|#f5f5f5|线条颜色|
|line-active-color |String |否|#f5f5f5|已完成线条颜色|
|steps |Array |是|[]|steps数据|
|steps.text |String |是||标题|
|steps.icon |String |否||自定义icon|
|steps.activeIcon |String |否||已完成状态自定义icon|
|steps.iconColor |String |否||自定义icon颜色|
|steps.iconActiveColor |String |是||已完成状态自定义icon颜色|
|line-style |String |否|dashed|线条样式: dotted solid double dashed|
|line-active-style |String |否|solid|已完成线条样式: dotted solid double dashed|
|line-width |Number |否|3.62|线条宽度,单位是rpx|
|title-color |String |否|#999|标题颜色|
|title-active-color |String |否|#000|已完成标题颜色|
|descColor |String |否|#999|副标题颜色|
|descActiveColor |String |否|#999|已完成副标题颜色|
|space |Number |否|162|item宽度,指的是每一个步骤之间的距离,单位是rpx|

#### 代码示例
swan:
```
<view>
    <view class="center">2步操作</view>
    <gov-steps
        active="1"
        line-style="solid"
        steps="{{twoSteps}}">
    </gov-steps>
    <view class="center">3步操作</view>
    <gov-steps
        active="1"
        line-style="solid"
        steps="{{steps}}">
    </gov-steps>
    <view class="center">4步操作</view>
    <gov-steps
        active="1"
        line-style="solid"
        steps="{{fourSteps}}">
    </gov-steps>
    <view class="center">未执行步骤条</view>
    <gov-steps
        active="0"
        line-style="solid"
        line-color="#a9a9a9"
        line-width="2"
        title-color="gray"
        descColor="gray"
        steps="{{steps}}">
    </gov-steps>
    <view class="center">执行中步骤条</view>
    <gov-steps
        active="1"
        color='#bc8f8f'
        active-color="#c40311"
        line-style="solid"
        line-color="#bc8f8f"
        line-width="2"
        title-color="gray"
        title-active-color="#c40311"
        steps="{{fuStepsing}}">
    </gov-steps>
    <view class="center">已完成状态步骤条</view>
    <gov-steps
        active="{{3}}"
        line-style="solid"
        active-color="#c40311"
        line-color="#bc8f8f"
        line-active-color="#c40311"
        line-active-style="dotted"
        title-color="gray"
        title-active-color="#c40311"
        line-width="4"
        steps="{{activeSteps}}">
    </gov-steps>
    <view class="center">有副标题步骤条</view>
    <gov-steps
        active="2"
        line-style="solid"
        line-color="#0000cd"
        line-width="2"
        title-color="gray"
        descColor="gray"
        title-active-color="#4169e1"
        descActiveColor="#4169e1"
        steps="{{fuSteps}}">
    </gov-steps>
    <view class="center">有副标题已完成状态步骤条</view>
    <gov-steps
        active-color="#2b99bb"
        line-color="#708090"
        line-active-color="#add8E6"
        line-active-style="dotted"
        active="{{3}}"
        line-style="solid"
        line-width="4"
        descActiveColor="#2b99bb"
        title-active-color="#2b99bb"
        steps="{{fuActiveSteps}}">
    </gov-steps>
    <view class="button-container">
        <gov-button
            button-size="large"
            button-color="default"
            button-text="点击按钮执行下方自定义icon步骤条的步骤"
            button-disabled="{{false}}"
            bindtap="changeIcon">
        </gov-button>
    </view>
    <view class="center">自定义icon步骤条</view>
    <gov-steps
        active="{{num}}"
        steps="{{iconActiveSteps}}">
    </gov-steps>
    <view class="button-container">
        <gov-button
            button-size="large"
            button-color="default"
            button-text="点击按钮执行下方步骤条的步骤"
            button-disabled="{{false}}"
            bindtap="changeActive">
        </gov-button>
    </view>
    <view class="center">8步操作</view>
    <gov-steps
        space="187.5"
        line-style="solid"
        line-active-color="#add8e6"
        line-active-style="dotted"
        active="{{numActive}}"
        line-width="4"
        steps="{{eightSteps}}">
    </gov-steps>
</view>
```
js:
```
Page({
    data: {
        num: 0,
        numActive: 1,
        twoSteps: [
            {
                text: '标题文案标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案标题文案'
            }
        ],
        steps: [
            {
                text: '标题文案标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案标题文案'
            }
        ],
        fourSteps: [
            {
                text: '标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案标题文案'
            }
        ],
        fuStepsing: [
            {
                text: '标题文案'
            },
            {
                text: '标题文案'
            },
            {
                text: '标题文案'
            }
        ],
        fuSteps: [
            {
                text: '标题文案',
                desc: '副标题'
            },
            {
                text: '标题文案',
                desc: '副标题'
            },
            {
                text: '标题文案',
                desc: '副标题'
            }
        ],
        activeSteps: [
            {
                text: '标题文案'
            },
            {
                text: '标题文案'
            },
            {
                text: '标题文案'
            }
        ],
        fuActiveSteps: [
            {
                text: '标题文案',
                desc: '副标题'
            },
            {
                text: '标题文案',
                desc: '副标题'
            },
            {
                text: '标题文案',
                desc: '副标题'
            }
        ],
        iconActiveSteps: [
            {
                text: '标题文案',
                icon: 'home',
                iconColor: '#9370db',
                activeIcon: 'real-estate-m',
                iconActiveColor: '#ff69b4'
            },
            {
                text: '标题文案',
                icon: 'home',
                iconColor: '#9370db',
                activeIcon: 'real-estate-m',
                iconActiveColor: '#ff69b4'
            },
            {
                text: '标题文案',
                icon: 'home',
                iconColor: '#9370db',
                activeIcon: 'real-estate-m',
                iconActiveColor: '#ff69b4'
            }
        ],
        eightSteps: [
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            },
            {
                text: '标题文案标题文案标题文案'
            }
        ]
    },
    showToast() {
        swan.showToast({
            title: '步骤已执行完成',
            icon: 'none'
        });
    },
    changeActive() {
        const {numActive} = this.data;
        if (numActive >= 0 && numActive < 8) {
            this.setData({
                numActive: ++this.data.numActive
            });
        }
        else {
            this.showToast();
        }
    },
    changeIcon() {
        const {num} = this.data;
        if (num >= 0 && num < 3) {
            this.setData({
                num: ++this.data.num
            });
        }
        else {
            this.showToast();
        }
    }
});
```
css:
```
.center {
    width: 100%; 
    text-align: center;
}
.button-container {
    margin: 30px 0;
}
```