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
|
extends ../reference.jade
block documentation
h1 Attributes
p Tag attributes look similar to html, however their values are just regular JavaScript.
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
a(href='google.com') Google
a(class='button', href='google.com') Google
.col-lg-6
+html
:htmlsrc
<a href="google.com">Google</a>
<a class="button" href="google.com">Google</a>
p All the normal JavaScript expressions work fine too:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
- var authenticated = true
body(class=authenticated?'authed':'anon')
.col-lg-6
+html
:htmlsrc
<body class="authed"></body>
h4#booleanattribs Boolean Attributes
p Boolean attributes are mirrored by Jade, and accept bools, aka #[code true] or #[code false]. When no value is specified true is assumed.
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())
.col-lg-6
+html
:htmlsrc
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />
p If the doctype is #[code html] jade knows not to mirror the attribute and uses the terse style (understood by all browsers).
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')
.col-lg-6
+html
:htmlsrc
<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">
h2 Class Attributes
p The <code>class</code> attribute can be a string (like any normal attribute) but it can also be an array of class names, which is handy when generated from JavaScript.
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])
.col-lg-6
+html
:htmlsrc
<a class="foo bar baz"></a>
<a class="foo bar baz bing"></a>
h2 Class Literal
p Classes may be defined using a #[code .classname] syntax:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
a.button
.col-lg-6
+html
:htmlsrc
<a class="button"></a>
p Since div's are such a common choice of tag, it is the default if you omit the tag name:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
.content
.col-lg-6
+html
:htmlsrc
<div class="content"></div>
h2 ID Literal
p IDs may be defined using a <code>#idname</code> syntax:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
a#main-link
.col-lg-6
+html
:htmlsrc
<a id="main-link"></a>
p Since div's are such a common choice of tag, it is the default if you omit the tag name:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
#content
.col-lg-6
+html
:htmlsrc
<div id="content"></div>
|
