-
Notifications
You must be signed in to change notification settings - Fork 167
/
steps.jade
205 lines (194 loc) · 6.34 KB
/
steps.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
extends _base
block title
title 步骤条
block sidebar
+sidebar('step')
block content
h2.sui-page-header 设计规范
div.docs-description
img(src='pictures/docs/steps.png')
ul.demo-operations.clearfix
li
a(href='#') 下载psd文件
h2.sui-page-header 开发者文档
p.sui-lead
| 适用于需要步骤条的业务场景
<h4>修复日志</h4>
<ul>
<li>加入一个wrap层,用来解决FF下display:table-cell和position:relative不能并存的问题</li>
<li>目前,在本机上(xp,ubuntu),IE和chrome展示完美,但是xp下的FF尖角处有黑线,在其他同学的机子上没有发现该问题</li>
</ul>
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo1', data-toggle='tab') 示例
li
a(href='#code1', data-toggle='tab') 代码
li
a(href='#doc1', data-toggle='tab') 文档
div.tab-content
div.tab-pane.active#demo1
div.bs-docs-example
h2 定宽步骤条
div.sui-steps
div.wrap
div.finished
label
span.round
<i class="sui-icon icon-pc-right"></i>
span 第一步 #4AA4D5
i.triangle-right-bg
i.triangle-right
div.wrap
div.current
label
span.round 2
span 第二步 #333333
i.triangle-right-bg
i.triangle-right
div.wrap
div.todo
label
span.round 3
span 第三步 #999999
div.sui-steps.steps-large
div.wrap
div.finished
label
span.round
<i class="sui-icon icon-pc-right"></i>
span 第一步 #4AA4D5
i.triangle-right-bg
i.triangle-right
div.wrap
div.current
label
span.round 2
span 第二步 #333333
i.triangle-right-bg
i.triangle-right
div.wrap
div.todo
label
span.round 3
span 第三步 #999999
h2 自适应步骤条
span 根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性
div.sui-steps.steps-auto
div.wrap
div.finished
label
span.round
<i class="sui-icon icon-pc-right"></i>
span 第一步 #4AA4D5
i.triangle-right-bg
i.triangle-right
div.wrap
div.current
label
span.round 2
span 第二步 #333333
i.triangle-right-bg
i.triangle-right
div.wrap
div.todo
label
span.round 3
span 第三步 #999999
div.sui-steps.steps-large.steps-auto
div.wrap
div.finished
label
span.round
<i class="sui-icon icon-pc-right"></i>
span 第一步 #4AA4D5
i.triangle-right-bg
i.triangle-right
div.wrap
div.current
label
span.round 2
span 第二步 #333333
i.triangle-right-bg
i.triangle-right
div.wrap
div.todo
label
span.round 3
span 第三步 #999999
i.triangle-right-bg
i.triangle-right
div.wrap
div.todo
label
span.round 3
span 第四步 #999999
i.triangle-right-bg
i.triangle-right
h2 前台定宽步骤条
div.sui-steps-round
div.finished
div.wrap
div.round 1
div.bar
label 文字描述
div.current
div.wrap
div.round 1
div.bar
label 文字描述
div.todo
div.wrap
div.round 1
div.bar
label 文字描述
div.todo(style="width:5%")
div.wrap
div.round 3
label 文字描述
h2 前台自适应步骤条
span 根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应,如果希望步骤条整体自适应,同时单个step保持一定比例的宽度,参考下面的例子
div.sui-steps-round.steps-round-auto
div.finished
div.wrap
div.round 1
div.bar
label 文文字描述文字描述文字描述文字描述字描述文字
div.current
div.wrap
div.round 1
div.bar
label 文字描述
div.todo
div.wrap
div.round 1
div.bar
label 文字描述
div.todo(style="width:5%")
div.wrap
div.round 3
label 文字描述
span 同时指定了steps-round-auto和steps步骤数,步骤条会整体自适应,同时单个step保持一定比例的宽度,目前提供steps-3到steps-7,使用方法类似bootstrap的删隔布局
div.sui-steps-round.steps-round-auto.steps-4
div.finished
div.wrap
div.round 1
div.bar
label 文文字描述文字描述文字描述文字描述字描述文字
div.current
div.wrap
div.round 1
div.bar
label 文字描述
div.todo
div.wrap
div.round 1
div.bar
label 文字描述
div.todo(style="width:5%")
div.wrap
div.round 3
label 文字描述
div.tab-pane#code1
pre.prettyprint.linenums(data-target='#demo1>div')
div.tab-pane#doc1
| <code>steps-auto</code>适用于步骤条内容不能过长的情景,极端情况下请自行修改每个step的宽度