设计规范

开发者文档
适用于需要步骤条的业务场景
修复日志
- 加入一个wrap层,用来解决FF下display:table-cell和position:relative不能并存的问题
- 目前,在本机上(xp,ubuntu),IE和chrome展示完美,但是xp下的FF尖角处有黑线,在其他同学的机子上没有发现该问题
定宽步骤条
自适应步骤条
根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性前台定宽步骤条
1
1
1
3
前台自适应步骤条
根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应,如果希望步骤条整体自适应,同时单个step保持一定比例的宽度,参考下面的例子1
1
1
3
1
1
1
3
- <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的宽度