步骤条

下载psd文件

适用于需要步骤条的业务场景

修复日志

加入一个wrap层，用来解决FF下display:table-cell和position:relative不能并存的问题
目前，在本机上(xp,ubuntu),IE和chrome展示完美，但是xp下的FF尖角处有黑线，在其他同学的机子上没有发现该问题

定宽步骤条

第一步 #4AA4D5

2 第二步 #333333

3第三步 #999999

第一步 #4AA4D5

2第二步 #333333

3第三步 #999999

自适应步骤条

根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性

第一步 #4AA4D5

2第二步 #333333

3第三步 #999999

第一步 #4AA4D5

2第二步 #333333

3第三步 #999999

3第四步 #999999

前台定宽步骤条

文字描述

前台自适应步骤条

根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应，如果希望步骤条整体自适应，同时单个step保持一定比例的宽度，参考下面的例子

文文字描述文字描述文字描述文字描述字描述文字

文字描述

同时指定了steps-round-auto和steps步骤数,步骤条会整体自适应，同时单个step保持一定比例的宽度，目前提供steps-3到steps-7，使用方法类似bootstrap的删隔布局

文文字描述文字描述文字描述文字描述字描述文字

文字描述

<h2>定宽步骤条</h2>
<div class="sui-steps">
  <div class="wrap">
    <div class="finished">
      <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2 </span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<div class="sui-steps steps-large">
  <div class="wrap">
    <div class="finished">
      <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<h2>自适应步骤条</h2><span>根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性</span>
<div class="sui-steps steps-auto">
  <div class="wrap">
    <div class="finished">
      <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<div class="sui-steps steps-large steps-auto">
  <div class="wrap">
    <div class="finished">
      <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第四步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
</div>
<h2>前台定宽步骤条 </h2>
<div class="sui-steps-round">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div>
<h2>前台自适应步骤条 </h2><span>根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应，如果希望步骤条整体自适应，同时单个step保持一定比例的宽度，参考下面的例子</span>
<div class="sui-steps-round steps-round-auto">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div><span>同时指定了steps-round-auto和steps步骤数,步骤条会整体自适应，同时单个step保持一定比例的宽度，目前提供steps-3到steps-7，使用方法类似bootstrap的删隔布局</span>
<div class="sui-steps-round steps-round-auto steps-4">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div>

steps-auto适用于步骤条内容不能过长的情景，极端情况下请自行修改每个step的宽度

设计规范

开发者文档

修复日志

定宽步骤条

自适应步骤条

前台定宽步骤条

前台自适应步骤条