-
Notifications
You must be signed in to change notification settings - Fork 167
/
tag.jade
89 lines (76 loc) · 2.65 KB
/
tag.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
extends _base
block title
title Tag
block sidebar
+sidebar('Tag')
block content
h2.sui-page-header 开发者文档
p.sui-lead 入口class:<code>.sui-tag</code>。近亲label在
a(href='./label.html') 这里
p
strong 更新 @2014-06-23: 修改了布局方式,增加了 <code>.tag-bordered</code>,增加了默认的margin-bottom。
h2 普通与选中的tag
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
- var txt = ['Normal', 'logo设计', '店铺装修达人', '艺术', '公sdf告', '注意afs']
h3 默认
ul.sui-tag
each text, i in txt
li #{text}
h3 选中的tag的状态:li.tag-selected
ul.sui-tag.tag-selected
each text, i in txt
if i % 2 == 0
li #{text}
else
li.tag-selected #{text}
div.tab-pane#code1
pre.prettyprint.linenums(data-target='#demo1>div')
div.tab-pane#doc1
p 使用方法很简单了,最好是用ul>li的结构,或者内部是a标签也可以。
ul.demo-operations.clearfix
li
a(href='#') 下载psd文件
li
a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
h2 右侧带叉(用以删除)
p.sui-lead
| 加上 <code>.tag-bordered</code>,会默认加上灰色边框。
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo2', data-toggle='tab') 示例
li
a(href='#code2', data-toggle='tab') 代码
li
a(href='#doc2', data-toggle='tab') 文档
div.tab-content
div.tab-pane.active#demo2
div.bs-docs-example
- var txt = ['Normal', 'logo设计', '店铺装修达人', '艺术', '公sdf告', '注意afs', '店铺装修达人', '艺术', '公sdf告']
h3 默认 .sui-tag
ul.sui-tag.tag-bordered
each text, i in txt
if i % 2 == 0
li #{text}
else
li.tag-selected.with-x #{text}
i ×
div.tab-pane#code2
pre.prettyprint.linenums(data-target='#demo2>div')
div.tab-pane#doc2
p 带叉的tag则在每个tag元素附加class="with-x",同时内部添加html:
code <i>&times;</i>
p 因为是CSS组件,相关事件需要根据业务逻辑自己添加
ul.demo-operations.clearfix
li
a(href='#') 下载psd文件
li
a.copy-btn(href='javascript:void(0)', data-target='#demo2>div') 复制代码