步骤条
显示一个任务的进度；或者引导用户完成某个复杂任务。
规则
- 应用在离散和时间较长的进度显示，eg：挂号进度。
- 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。
代码演示
步骤条
步骤1
步骤2
步骤3
步骤1
步骤2
步骤3
步骤1
步骤2
步骤3
步骤1
步骤2
步骤3
步骤1
步骤2
步骤3
纵向步骤条
1
进行中1
辅助文字内容
2
待运行
辅助文字内容
3
待运行
辅助文字内容
1
已完成
辅助文字内容
2
进行中2
辅助文字内容
3
待运行
辅助文字内容
1
已完成
辅助文字内容
2
出错啦
辅助文字内容
3
待运行
辅助文字内容
step 步骤条
4个状态：default｜（step-waiting1 | step-waiting2）|step-finish | (step-error｜step-error2)其中waiting，error状态有两种样式。请引用者根据需求自行选择
<div class="step">
<div class="step-item ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">步骤1</div>
</div>
<div class="step-item step-waiting1 ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">步骤2</div>
</div>
<div class="step-item step-waiting2 ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">步骤3</div>
</div>
<div class="step-item step-finish ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">步骤4</div>
</div>
<div class="step-item step-error ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">步骤5</div>
</div>
</div>step 纵向步骤条
添加step-rol类可以得到一个纵向步骤条
<div class="step step-rol">
<div class="step-item step-waiting1 ">
<div class="step-circle ">1</div>
<div class="step-line"></div>
<div class="step-msg-content">
<div class="step-msg">步骤1</div>
<div class="step-brief">辅助文字内容</div>
</div>
</div>
<div class="step-item step-waiting2 ">
<div class="step-circle ">2</div>
<div class="step-line"></div>
<div class="step-msg-content">
<div class="step-msg">步骤2</div>
<div class="step-brief">辅助文字内容</div>
</div>
</div>
<div class="step-item step-finish ">
<div class="step-circle ">3</div>
<div class="step-line"></div>
<div class="step-msg-content">
<div class="step-msg">步骤3</div>
<div class="step-brief">辅助文字内容</div>
</div>
</div>
<div class="step-item step-error ">
<div class="step-circle ">4</div>
<div class="step-line"></div>
<div class="step-msg-content">
<div class="step-msg">步骤4</div>
<div class="step-brief">辅助文字内容</div>
</div>
</div>
<div class="step-item">
<div class="step-circle ">5</div>
<div class="step-line"></div>
<div class="step-msg-content">
<div class="step-msg">步骤5</div>
<div class="step-brief">辅助文字内容</div>
</div>
</div>
</div>