新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

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

修复日志

  • 加入一个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
  1. <h2>定宽步骤条</h2>
  2. <div class="sui-steps">
  3. <div class="wrap">
  4. <div class="finished">
  5. <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>
  6. </div>
  7. </div>
  8. <div class="wrap">
  9. <div class="current">
  10. <label><span class="round">2 </span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  11. </div>
  12. </div>
  13. <div class="wrap">
  14. <div class="todo">
  15. <label><span class="round">3</span><span>第三步 #999999</span></label>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="sui-steps steps-large">
  20. <div class="wrap">
  21. <div class="finished">
  22. <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>
  23. </div>
  24. </div>
  25. <div class="wrap">
  26. <div class="current">
  27. <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  28. </div>
  29. </div>
  30. <div class="wrap">
  31. <div class="todo">
  32. <label><span class="round">3</span><span>第三步 #999999</span></label>
  33. </div>
  34. </div>
  35. </div>
  36. <h2>自适应步骤条</h2><span>根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性</span>
  37. <div class="sui-steps steps-auto">
  38. <div class="wrap">
  39. <div class="finished">
  40. <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>
  41. </div>
  42. </div>
  43. <div class="wrap">
  44. <div class="current">
  45. <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  46. </div>
  47. </div>
  48. <div class="wrap">
  49. <div class="todo">
  50. <label><span class="round">3</span><span>第三步 #999999</span></label>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="sui-steps steps-large steps-auto">
  55. <div class="wrap">
  56. <div class="finished">
  57. <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>
  58. </div>
  59. </div>
  60. <div class="wrap">
  61. <div class="current">
  62. <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  63. </div>
  64. </div>
  65. <div class="wrap">
  66. <div class="todo">
  67. <label><span class="round">3</span><span>第三步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  68. </div>
  69. </div>
  70. <div class="wrap">
  71. <div class="todo">
  72. <label><span class="round">3</span><span>第四步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
  73. </div>
  74. </div>
  75. </div>
  76. <h2>前台定宽步骤条 </h2>
  77. <div class="sui-steps-round">
  78. <div class="finished">
  79. <div class="wrap">
  80. <div class="round">1</div>
  81. <div class="bar"></div>
  82. </div>
  83. <label>文字描述</label>
  84. </div>
  85. <div class="current">
  86. <div class="wrap">
  87. <div class="round">1</div>
  88. <div class="bar"></div>
  89. </div>
  90. <label>文字描述</label>
  91. </div>
  92. <div class="todo">
  93. <div class="wrap">
  94. <div class="round">1</div>
  95. <div class="bar"></div>
  96. </div>
  97. <label>文字描述</label>
  98. </div>
  99. <div class="todo last">
  100. <div class="wrap">
  101. <div class="round">3</div>
  102. </div>
  103. <label>文字描述</label>
  104. </div>
  105. </div>
  106. <h2>前台自适应步骤条 </h2><span>根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应,如果希望步骤条整体自适应,同时单个step保持一定比例的宽度,参考下面的例子</span>
  107. <div class="sui-steps-round steps-round-auto">
  108. <div class="finished">
  109. <div class="wrap">
  110. <div class="round">1</div>
  111. <div class="bar"></div>
  112. </div>
  113. <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  114. </div>
  115. <div class="current">
  116. <div class="wrap">
  117. <div class="round">1</div>
  118. <div class="bar"></div>
  119. </div>
  120. <label>文字描述</label>
  121. </div>
  122. <div class="todo">
  123. <div class="wrap">
  124. <div class="round">1</div>
  125. <div class="bar"></div>
  126. </div>
  127. <label>文字描述</label>
  128. </div>
  129. <div class="todo last">
  130. <div class="wrap">
  131. <div class="round">3</div>
  132. </div>
  133. <label>文字描述</label>
  134. </div>
  135. </div><span>同时指定了steps-round-auto和steps步骤数,步骤条会整体自适应,同时单个step保持一定比例的宽度,目前提供steps-3到steps-7,使用方法类似bootstrap的删隔布局</span>
  136. <div class="sui-steps-round steps-round-auto steps-4">
  137. <div class="finished">
  138. <div class="wrap">
  139. <div class="round">1</div>
  140. <div class="bar"></div>
  141. </div>
  142. <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  143. </div>
  144. <div class="current">
  145. <div class="wrap">
  146. <div class="round">1</div>
  147. <div class="bar"></div>
  148. </div>
  149. <label>文字描述</label>
  150. </div>
  151. <div class="todo">
  152. <div class="wrap">
  153. <div class="round">1</div>
  154. <div class="bar"></div>
  155. </div>
  156. <label>文字描述</label>
  157. </div>
  158. <div class="todo last">
  159. <div class="wrap">
  160. <div class="round">3</div>
  161. </div>
  162. <label>文字描述</label>
  163. </div>
  164. </div>
steps-auto适用于步骤条内容不能过长的情景,极端情况下请自行修改每个step的宽度