alice-step

step

---

通用步骤条，有标准和迷你两套样式。支持二到五步。

步骤下面的文字最多写 6 个字，如果超出，请重置 ui-step 的 overflow 属性。

---

演示

<link type="text/css" rel="stylesheet" media="screen" href="./index.css">
 
<style>
.ui-step, .ui-ministep {
    margin: 30px 0;
}
</style> 

标准步骤条

<ol class="ui-step ui-step-3">
    <li class="ui-step-start ui-step-done">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">1</i>
            <span class="ui-step-text">第一步</span>
        </div>
    </li>
    <li class="ui-step-active">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">2</i>
            <span class="ui-step-text">第二步</span>
        </div>
    </li>
    <li class="ui-step-end">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="iconfont ui-step-number">&#xF029;</i>
            <span class="ui-step-text">第三步第三步</span>
        </div>
    </li>
</ol>

四步

<ol class="ui-step ui-step-4">
    <li class="ui-step-start ui-step-active">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">1</i>
            <span class="ui-step-text">第一步</span>
        </div>
    </li>
    <li class="">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">2</i>
            <span class="ui-step-text">第二步</span>
        </div>
    </li>
    <li class="">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">3</i>
            <span class="ui-step-text">第三步</span>
        </div>
    </li>
    <li class="ui-step-end">
        <div class="ui-step-line">-</div>    
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="iconfont ui-step-number">&#xF029;</i>
            <span class="ui-step-text">第四步</span>
        </div>
    </li>
</ol>

五步

<ol class="ui-step ui-step-5">
    <li class="ui-step-start ui-step-done">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">1</i>
            <span class="ui-step-text">第一步</span>
        </div>
    </li>
    <li class="ui-step-done">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">2</i>
            <span class="ui-step-text">第二步</span>
        </div>
    </li>
    <li class="ui-step-done">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">3</i>
            <span class="ui-step-text">第三步</span>
        </div>
    </li>
    <li class="ui-step-active">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">4</i>
            <span class="ui-step-text">第四步</span>
        </div>
    </li>
    <li class="ui-step-end">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="iconfont ui-step-number">&#xF029;</i>
            <span class="ui-step-text">第五步</span>
        </div>
    </li>
</ol>

二步

<ol class="ui-step ui-step-2">
    <li class="ui-step-start ui-step-active">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">1</i>
            <span class="ui-step-text">第一步</span>
        </div>
    </li>
    <li class="ui-step-end">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="iconfont ui-step-number">&#xF029;</i>
            <span class="ui-step-text">第二步</span>
        </div>
    </li>
</ol>

蓝色步骤条

<ol class="ui-step ui-step-blue ui-step-3">
    <li class="ui-step-start ui-step-done">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">1</i>
            <span class="ui-step-text">第一步</span>
        </div>
    </li>
    <li class="ui-step-active">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="ui-step-number">2</i>
            <span class="ui-step-text">第二步</span>
        </div>
    </li>
    <li class="ui-step-end">
        <div class="ui-step-line">-</div>
        <div class="ui-step-icon">
            <i class="iconfont">&#xf02f;</i>
            <i class="iconfont ui-step-number">&#xF029;</i>
            <span class="ui-step-text">第三步第三步</span>
        </div>
    </li>
</ol>

迷你步骤条

<ol class="ui-ministep">
    <li class="ui-ministep-item">
        <i class="iconfont">&#xf02f;</i>
        <i class="ui-ministep-number">1</i>
        <span class="ui-ministep-text">第一步</span>
    </li>
    <li class="ui-ministep-item ui-ministep-active">
        <i class="iconfont">&#xf02f;</i>
        <i class="ui-ministep-number">2</i>
        <span class="ui-ministep-text">第二步</span>
    </li>
    <li class="ui-ministep-item">
        <i class="iconfont">&#xf02f;</i>
        <i class="ui-ministep-number">3</i>
        <span class="ui-ministep-text">第三步</span>
    </li>
</ol>