步骤条

设计规范

开发者文档

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

修复日志

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

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