slim 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.yardopts +3 -2
- data/CHANGES +12 -0
- data/README.md +56 -10
- data/Rakefile +7 -1
- data/lib/slim.rb +1 -1
- data/lib/slim/code_attributes.rb +67 -0
- data/lib/slim/engine.rb +2 -1
- data/lib/slim/parser.rb +27 -9
- data/lib/slim/splat_attributes.rb +21 -20
- data/lib/slim/version.rb +1 -1
- data/slim.gemspec +1 -3
- data/test/core/test_encoding.rb +6 -0
- data/test/core/test_html_attributes.rb +21 -5
- data/test/core/test_html_structure.rb +0 -16
- data/test/core/test_pretty.rb +2 -2
- data/test/literate/TESTS.md +830 -0
- data/test/literate/helper.rb +15 -0
- data/test/literate/run.rb +96 -0
- metadata +66 -27
- data/lib/slim/boolean_attributes.rb +0 -67
@@ -283,22 +283,6 @@ p(id="marvin" class="martian" data-info="Illudium Q-36")= output_number
|
|
283
283
|
assert_html '<p class="martian" data-info="Illudium Q-36" id="marvin">1337</p>', source
|
284
284
|
end
|
285
285
|
|
286
|
-
def test_static_empty_attribute
|
287
|
-
source = %q{
|
288
|
-
p(id="marvin" class="" data-info="Illudium Q-36")= output_number
|
289
|
-
}
|
290
|
-
|
291
|
-
assert_html '<p class="" data-info="Illudium Q-36" id="marvin">1337</p>', source
|
292
|
-
end
|
293
|
-
|
294
|
-
def test_dynamic_empty_attribute
|
295
|
-
source = %q{
|
296
|
-
p(id="marvin" class=nil nonempty=("".to_s) data-info="Illudium Q-36")= output_number
|
297
|
-
}
|
298
|
-
|
299
|
-
assert_html '<p data-info="Illudium Q-36" id="marvin" nonempty="">1337</p>', source
|
300
|
-
end
|
301
|
-
|
302
286
|
def test_closed_tag
|
303
287
|
source = %q{
|
304
288
|
closed/
|
data/test/core/test_pretty.rb
CHANGED
@@ -0,0 +1,830 @@
|
|
1
|
+
# Slim test suite
|
2
|
+
|
3
|
+
You can run this testsuite with `rake test:literate`.
|
4
|
+
|
5
|
+
We use pretty mode in the test suite to make the output more readable. Pretty mode
|
6
|
+
is enabled by setting the option
|
7
|
+
|
8
|
+
~~~ options
|
9
|
+
:pretty => true
|
10
|
+
~~~
|
11
|
+
|
12
|
+
## Line indicators
|
13
|
+
|
14
|
+
In this section we test all line indicators.
|
15
|
+
|
16
|
+
### Text `|`
|
17
|
+
|
18
|
+
A text blocks starts with the `|` as line indicator.
|
19
|
+
|
20
|
+
~~~ slim
|
21
|
+
| Text block
|
22
|
+
~~~
|
23
|
+
|
24
|
+
renders as
|
25
|
+
|
26
|
+
~~~ html
|
27
|
+
Text block
|
28
|
+
~~~
|
29
|
+
|
30
|
+
Multiple lines can be indented beneath the first text line.
|
31
|
+
|
32
|
+
~~~ slim
|
33
|
+
| Text
|
34
|
+
block
|
35
|
+
|
36
|
+
with
|
37
|
+
|
38
|
+
multiple
|
39
|
+
lines
|
40
|
+
~~~
|
41
|
+
|
42
|
+
renders as
|
43
|
+
|
44
|
+
~~~ html
|
45
|
+
Text
|
46
|
+
block
|
47
|
+
|
48
|
+
with
|
49
|
+
|
50
|
+
multiple
|
51
|
+
lines
|
52
|
+
~~~
|
53
|
+
|
54
|
+
The first line of a text block determines the indentation.
|
55
|
+
|
56
|
+
~~~ slim
|
57
|
+
|
|
58
|
+
|
59
|
+
Text
|
60
|
+
block
|
61
|
+
|
62
|
+
with
|
63
|
+
|
64
|
+
multiple
|
65
|
+
lines
|
66
|
+
~~~
|
67
|
+
|
68
|
+
renders as
|
69
|
+
|
70
|
+
~~~ html
|
71
|
+
Text
|
72
|
+
block
|
73
|
+
|
74
|
+
with
|
75
|
+
|
76
|
+
multiple
|
77
|
+
lines
|
78
|
+
~~~
|
79
|
+
|
80
|
+
You can nest text blocks beneath tags.
|
81
|
+
|
82
|
+
~~~ slim
|
83
|
+
body
|
84
|
+
| Text
|
85
|
+
~~~
|
86
|
+
|
87
|
+
renders as
|
88
|
+
|
89
|
+
~~~ html
|
90
|
+
<body>Text</body>
|
91
|
+
~~~
|
92
|
+
|
93
|
+
You can embed html code in the text which is not escaped.
|
94
|
+
|
95
|
+
~~~ slim
|
96
|
+
| <a href="http://slim-lang.com">slim-lang.com</a>
|
97
|
+
~~~
|
98
|
+
|
99
|
+
renders as
|
100
|
+
|
101
|
+
~~~ html
|
102
|
+
<a href="http://slim-lang.com">slim-lang.com</a>
|
103
|
+
~~~
|
104
|
+
|
105
|
+
### Text with trailing white space `'`
|
106
|
+
|
107
|
+
A text blocks with trailing white space starts with the `'` as line indicator.
|
108
|
+
|
109
|
+
~~~ slim
|
110
|
+
' Text block
|
111
|
+
~~~
|
112
|
+
|
113
|
+
renders as
|
114
|
+
|
115
|
+
~~~ html
|
116
|
+
Text block
|
117
|
+
~~~
|
118
|
+
|
119
|
+
This is especially useful if you use tags behind a text block.
|
120
|
+
|
121
|
+
~~~ slim
|
122
|
+
' Link to
|
123
|
+
a href="http://slim-lang.com" slim-lang.com
|
124
|
+
~~~
|
125
|
+
|
126
|
+
renders as
|
127
|
+
|
128
|
+
~~~ html
|
129
|
+
Link to <a href="http://slim-lang.com">slim-lang.com</a>
|
130
|
+
~~~
|
131
|
+
|
132
|
+
Multiple lines can be indented beneath the first text line.
|
133
|
+
|
134
|
+
~~~ slim
|
135
|
+
' Text
|
136
|
+
block
|
137
|
+
|
138
|
+
with
|
139
|
+
|
140
|
+
multiple
|
141
|
+
lines
|
142
|
+
~~~
|
143
|
+
|
144
|
+
renders as
|
145
|
+
|
146
|
+
~~~ html
|
147
|
+
Text
|
148
|
+
block
|
149
|
+
|
150
|
+
with
|
151
|
+
|
152
|
+
multiple
|
153
|
+
lines
|
154
|
+
~~~
|
155
|
+
|
156
|
+
The first line of a text block determines the indentation.
|
157
|
+
|
158
|
+
~~~ slim
|
159
|
+
'
|
160
|
+
|
161
|
+
Text
|
162
|
+
block
|
163
|
+
|
164
|
+
with
|
165
|
+
|
166
|
+
multiple
|
167
|
+
lines
|
168
|
+
~~~
|
169
|
+
|
170
|
+
renders as
|
171
|
+
|
172
|
+
~~~ html
|
173
|
+
Text
|
174
|
+
block
|
175
|
+
|
176
|
+
with
|
177
|
+
|
178
|
+
multiple
|
179
|
+
lines
|
180
|
+
~~~
|
181
|
+
|
182
|
+
### Inline HTML `<`
|
183
|
+
|
184
|
+
HTML can be written directly.
|
185
|
+
|
186
|
+
~~~ slim
|
187
|
+
<a href="http://slim-lang.com">slim-lang.com</a>
|
188
|
+
~~~
|
189
|
+
|
190
|
+
renders as
|
191
|
+
|
192
|
+
~~~ html
|
193
|
+
<a href="http://slim-lang.com">slim-lang.com</a>
|
194
|
+
~~~
|
195
|
+
|
196
|
+
HTML tags allow nested blocks inside.
|
197
|
+
|
198
|
+
~~~ slim
|
199
|
+
<html>
|
200
|
+
<head>
|
201
|
+
title Example
|
202
|
+
</head>
|
203
|
+
body
|
204
|
+
- if true
|
205
|
+
| yes
|
206
|
+
- else
|
207
|
+
| no
|
208
|
+
</html>
|
209
|
+
~~~
|
210
|
+
|
211
|
+
renders as
|
212
|
+
|
213
|
+
~~~ html
|
214
|
+
<html><head><title>Example</title></head><body>yes</body></html>
|
215
|
+
~~~
|
216
|
+
|
217
|
+
### Control code `-`
|
218
|
+
|
219
|
+
The dash `-` denotes arbitrary control code.
|
220
|
+
|
221
|
+
~~~ slim
|
222
|
+
- greeting = 'Hello, World!'
|
223
|
+
- if false
|
224
|
+
| Not true
|
225
|
+
- else
|
226
|
+
= greeting
|
227
|
+
~~~
|
228
|
+
|
229
|
+
renders as
|
230
|
+
|
231
|
+
~~~ html
|
232
|
+
Hello, World!
|
233
|
+
~~~
|
234
|
+
|
235
|
+
Complex code can be broken with backslash `\`.
|
236
|
+
|
237
|
+
~~~ slim
|
238
|
+
- greeting = 'Hello, '+\
|
239
|
+
\
|
240
|
+
'World!'
|
241
|
+
- if false
|
242
|
+
| Not true
|
243
|
+
- else
|
244
|
+
= greeting
|
245
|
+
~~~
|
246
|
+
|
247
|
+
renders as
|
248
|
+
|
249
|
+
~~~ html
|
250
|
+
Hello, World!
|
251
|
+
~~~
|
252
|
+
|
253
|
+
### Output `=`
|
254
|
+
|
255
|
+
The equal sign `=` produces dynamic output.
|
256
|
+
|
257
|
+
~~~ slim
|
258
|
+
= 7*7
|
259
|
+
~~~
|
260
|
+
|
261
|
+
renders as
|
262
|
+
|
263
|
+
~~~ html
|
264
|
+
49
|
265
|
+
~~~
|
266
|
+
|
267
|
+
Dynamic output is escaped by default.
|
268
|
+
|
269
|
+
~~~ slim
|
270
|
+
= '<script>evil();</script>'
|
271
|
+
~~~
|
272
|
+
|
273
|
+
renders as
|
274
|
+
|
275
|
+
~~~ html
|
276
|
+
<script>evil();</script>
|
277
|
+
~~~
|
278
|
+
|
279
|
+
Long code lines can be broken with `\`.
|
280
|
+
|
281
|
+
~~~ slim
|
282
|
+
= (0..10).map do |i|\
|
283
|
+
2**i \
|
284
|
+
end.join(', ')
|
285
|
+
~~~
|
286
|
+
|
287
|
+
renders as
|
288
|
+
|
289
|
+
~~~ html
|
290
|
+
1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024
|
291
|
+
~~~
|
292
|
+
|
293
|
+
You can also disable HTML escaping globally by setting the option
|
294
|
+
|
295
|
+
~~~ options
|
296
|
+
:disable_escape => true
|
297
|
+
~~~
|
298
|
+
|
299
|
+
~~~ slim
|
300
|
+
= '<script>evil();</script>'
|
301
|
+
~~~
|
302
|
+
|
303
|
+
renders as
|
304
|
+
|
305
|
+
~~~ html
|
306
|
+
<script>evil();</script>
|
307
|
+
~~~
|
308
|
+
|
309
|
+
### Output with trailing white space `='`
|
310
|
+
|
311
|
+
The equal sign with apostrophe `='` produces dynamic output with a trailing white space.
|
312
|
+
|
313
|
+
~~~ slim
|
314
|
+
=' 7*7
|
315
|
+
~~~
|
316
|
+
|
317
|
+
renders as
|
318
|
+
|
319
|
+
~~~ html
|
320
|
+
49
|
321
|
+
~~~
|
322
|
+
|
323
|
+
### Output without HTML escaping `==`
|
324
|
+
|
325
|
+
The double equal sign `==` produces dynamic output without HTML escaping.
|
326
|
+
|
327
|
+
~~~ slim
|
328
|
+
== '<script>evil();</script>'
|
329
|
+
~~~
|
330
|
+
|
331
|
+
renders as
|
332
|
+
|
333
|
+
~~~ html
|
334
|
+
<script>evil();</script>
|
335
|
+
~~~
|
336
|
+
|
337
|
+
The option option
|
338
|
+
|
339
|
+
~~~ options
|
340
|
+
:disable_escape => true
|
341
|
+
~~~
|
342
|
+
|
343
|
+
doesn't affect the output of `==`.
|
344
|
+
|
345
|
+
~~~ slim
|
346
|
+
== '<script>evil();</script>'
|
347
|
+
~~~
|
348
|
+
|
349
|
+
renders as
|
350
|
+
|
351
|
+
~~~ html
|
352
|
+
<script>evil();</script>
|
353
|
+
~~~
|
354
|
+
|
355
|
+
### Output without HTML escaping and trailing ws `=='`
|
356
|
+
|
357
|
+
|
358
|
+
The double equal sign with apostrophe `=='` produces dynamic output without HTML escaping and trailing white space.
|
359
|
+
|
360
|
+
~~~ slim
|
361
|
+
==' '<script>evil();</script>'
|
362
|
+
~~~
|
363
|
+
|
364
|
+
renders as
|
365
|
+
|
366
|
+
~~~ html
|
367
|
+
<script>evil();</script>
|
368
|
+
~~~
|
369
|
+
|
370
|
+
The option option
|
371
|
+
|
372
|
+
~~~ options
|
373
|
+
:disable_escape => true
|
374
|
+
~~~
|
375
|
+
|
376
|
+
doesn't affect the output of `==`.
|
377
|
+
|
378
|
+
~~~ slim
|
379
|
+
==' '<script>evil();</script>'
|
380
|
+
~~~
|
381
|
+
|
382
|
+
renders as
|
383
|
+
|
384
|
+
~~~ html
|
385
|
+
<script>evil();</script>
|
386
|
+
~~~
|
387
|
+
|
388
|
+
### Code comment `/`
|
389
|
+
|
390
|
+
Code comments begin with `/` and produce no output.
|
391
|
+
|
392
|
+
~~~ slim
|
393
|
+
/ Comment
|
394
|
+
body
|
395
|
+
/ Another comment
|
396
|
+
with
|
397
|
+
|
398
|
+
multiple lines
|
399
|
+
p Hello!
|
400
|
+
~~~
|
401
|
+
|
402
|
+
renders as
|
403
|
+
|
404
|
+
~~~ html
|
405
|
+
<body>
|
406
|
+
<p>Hello!</p>
|
407
|
+
</body>
|
408
|
+
~~~
|
409
|
+
|
410
|
+
### HTML comment `/!`
|
411
|
+
|
412
|
+
Code comments begin with `/!`.
|
413
|
+
|
414
|
+
~~~ slim
|
415
|
+
/! Comment
|
416
|
+
body
|
417
|
+
/! Another comment
|
418
|
+
with multiple lines
|
419
|
+
p Hello!
|
420
|
+
/!
|
421
|
+
First line determines indentation
|
422
|
+
|
423
|
+
of the comment
|
424
|
+
~~~
|
425
|
+
|
426
|
+
renders as
|
427
|
+
|
428
|
+
~~~ html
|
429
|
+
<!--Comment-->
|
430
|
+
<body>
|
431
|
+
<!--Another comment
|
432
|
+
with multiple lines-->
|
433
|
+
<p>Hello!</p>
|
434
|
+
<!--First line determines indentation
|
435
|
+
|
436
|
+
of the comment-->
|
437
|
+
</body>
|
438
|
+
~~~
|
439
|
+
|
440
|
+
### IE conditional comment `/[...]`
|
441
|
+
|
442
|
+
~~~ slim
|
443
|
+
/[if IE]
|
444
|
+
p Get a better browser.
|
445
|
+
~~~
|
446
|
+
|
447
|
+
renders as
|
448
|
+
|
449
|
+
~~~ html
|
450
|
+
<!--[if IE]><p>Get a better browser.</p><![endif]-->
|
451
|
+
~~~
|
452
|
+
|
453
|
+
## HTML tags
|
454
|
+
|
455
|
+
### Doctype tags
|
456
|
+
|
457
|
+
The doctype tag is a special tag which can be used to generate the complex doctypes in a very simple way.
|
458
|
+
|
459
|
+
You can output the XML version using the doctype tag.
|
460
|
+
|
461
|
+
~~~ slim
|
462
|
+
doctype xml
|
463
|
+
doctype xml ISO-8859-1
|
464
|
+
~~~
|
465
|
+
|
466
|
+
renders as
|
467
|
+
|
468
|
+
~~~ html
|
469
|
+
<?xml version="1.0" encoding="utf-8" ?>
|
470
|
+
<?xml version="1.0" encoding="iso-8859-1" ?>
|
471
|
+
~~~
|
472
|
+
|
473
|
+
In XHTML mode the following doctypes are supported:
|
474
|
+
|
475
|
+
~~~ slim
|
476
|
+
doctype html
|
477
|
+
doctype 5
|
478
|
+
doctype 1.1
|
479
|
+
doctype strict
|
480
|
+
doctype frameset
|
481
|
+
doctype mobile
|
482
|
+
doctype basic
|
483
|
+
doctype transitional
|
484
|
+
~~~
|
485
|
+
|
486
|
+
renders as
|
487
|
+
|
488
|
+
~~~ html
|
489
|
+
<!DOCTYPE html>
|
490
|
+
<!DOCTYPE html>
|
491
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
492
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
493
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
494
|
+
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
|
495
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
|
496
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
497
|
+
~~~
|
498
|
+
|
499
|
+
If we activate HTML mode with the option
|
500
|
+
|
501
|
+
~~~ options
|
502
|
+
:format => :html
|
503
|
+
~~~
|
504
|
+
|
505
|
+
the following doctypes are supported:
|
506
|
+
|
507
|
+
~~~ slim
|
508
|
+
doctype html
|
509
|
+
doctype 5
|
510
|
+
doctype strict
|
511
|
+
doctype frameset
|
512
|
+
doctype transitional
|
513
|
+
~~~
|
514
|
+
|
515
|
+
renders as
|
516
|
+
|
517
|
+
~~~ html
|
518
|
+
<!DOCTYPE html>
|
519
|
+
<!DOCTYPE html>
|
520
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
521
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
|
522
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
523
|
+
~~~
|
524
|
+
|
525
|
+
### Closed tags
|
526
|
+
|
527
|
+
You can close tags explicitly by appending a trailing `/`.
|
528
|
+
|
529
|
+
~~~ slim
|
530
|
+
div id="not-closed"
|
531
|
+
.closed/
|
532
|
+
#closed/
|
533
|
+
div id="closed"/
|
534
|
+
~~~
|
535
|
+
|
536
|
+
renders as
|
537
|
+
|
538
|
+
~~~ html
|
539
|
+
<div id="not-closed"></div>
|
540
|
+
<div class="closed" />
|
541
|
+
<div id="closed" />
|
542
|
+
<div id="closed" />
|
543
|
+
~~~
|
544
|
+
|
545
|
+
Note, that this is usually not necessary since the standard html tags (img, br, ...) are closed automatically.
|
546
|
+
|
547
|
+
~~~ slim
|
548
|
+
img src="image.png"
|
549
|
+
~~~
|
550
|
+
|
551
|
+
renders as
|
552
|
+
|
553
|
+
~~~ html
|
554
|
+
<img src="image.png" />
|
555
|
+
~~~
|
556
|
+
|
557
|
+
### Inline tags
|
558
|
+
|
559
|
+
Sometimes you may want to be a little more compact and inline the tags.
|
560
|
+
|
561
|
+
~~~ slim
|
562
|
+
ul
|
563
|
+
li.first: a href="/first" First
|
564
|
+
li: a href="/second" Second
|
565
|
+
~~~
|
566
|
+
|
567
|
+
renders as
|
568
|
+
|
569
|
+
~~~ html
|
570
|
+
<ul>
|
571
|
+
<li class="first">
|
572
|
+
<a href="/first">First</a>
|
573
|
+
</li>
|
574
|
+
<li>
|
575
|
+
<a href="/second">Second</a>
|
576
|
+
</li>
|
577
|
+
</ul>
|
578
|
+
~~~
|
579
|
+
|
580
|
+
For readability, don't forget you can wrap the attributes.
|
581
|
+
|
582
|
+
~~~ slim
|
583
|
+
ul
|
584
|
+
li.first: a(href="/first") First
|
585
|
+
li: a(href="/second") Second
|
586
|
+
~~~
|
587
|
+
|
588
|
+
renders as
|
589
|
+
|
590
|
+
~~~ html
|
591
|
+
<ul>
|
592
|
+
<li class="first">
|
593
|
+
<a href="/first">First</a>
|
594
|
+
</li>
|
595
|
+
<li>
|
596
|
+
<a href="/second">Second</a>
|
597
|
+
</li>
|
598
|
+
</ul>
|
599
|
+
~~~
|
600
|
+
|
601
|
+
### Text content
|
602
|
+
|
603
|
+
### Dynamic content `=`
|
604
|
+
|
605
|
+
### Attributes
|
606
|
+
|
607
|
+
#### Attribute wrapper
|
608
|
+
|
609
|
+
If a delimiter makes the syntax more readable for you, you can use the characters `{...}`, `(...)`, `[...]` to wrap the attributes.
|
610
|
+
|
611
|
+
~~~ slim
|
612
|
+
li
|
613
|
+
a(href="http://slim-lang.com" class="important") Link
|
614
|
+
li
|
615
|
+
a[href="http://slim-lang.com" class="important"] Link
|
616
|
+
li
|
617
|
+
a{href="http://slim-lang.com" class="important"} Link
|
618
|
+
~~~
|
619
|
+
|
620
|
+
renders as
|
621
|
+
|
622
|
+
~~~ html
|
623
|
+
<li>
|
624
|
+
<a class="important" href="http://slim-lang.com">Link</a>
|
625
|
+
</li>
|
626
|
+
<li>
|
627
|
+
<a class="important" href="http://slim-lang.com">Link</a>
|
628
|
+
</li>
|
629
|
+
<li>
|
630
|
+
<a class="important" href="http://slim-lang.com">Link</a>
|
631
|
+
</li>
|
632
|
+
~~~
|
633
|
+
|
634
|
+
If you wrap the attributes, you can spread them across multiple lines:
|
635
|
+
|
636
|
+
~~~ slim
|
637
|
+
a(href="http://slim-lang.com"
|
638
|
+
|
639
|
+
class="important") Link
|
640
|
+
~~~
|
641
|
+
|
642
|
+
renders as
|
643
|
+
|
644
|
+
~~~ html
|
645
|
+
<a class="important" href="http://slim-lang.com">Link</a>
|
646
|
+
~~~
|
647
|
+
|
648
|
+
~~~ slim
|
649
|
+
dl(
|
650
|
+
itemprop='address'
|
651
|
+
itemscope
|
652
|
+
itemtype='http://schema.org/PostalAddress'
|
653
|
+
)
|
654
|
+
~~~
|
655
|
+
|
656
|
+
renders as
|
657
|
+
|
658
|
+
~~~ html
|
659
|
+
<dl itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"></dl>
|
660
|
+
~~~
|
661
|
+
|
662
|
+
#### Quoted attributes
|
663
|
+
|
664
|
+
You can use single or double quotes for simple text attributes.
|
665
|
+
|
666
|
+
~~~ slim
|
667
|
+
a href="http://slim-lang.com" title='Slim Homepage' Goto the Slim homepage
|
668
|
+
~~~
|
669
|
+
|
670
|
+
renders as
|
671
|
+
|
672
|
+
~~~ html
|
673
|
+
<a href="http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage</a>
|
674
|
+
~~~
|
675
|
+
|
676
|
+
You can use text interpolation in the quoted attributes:
|
677
|
+
|
678
|
+
~~~ slim
|
679
|
+
- url='slim-lang.com'
|
680
|
+
a href="http://#{url}" Goto the #{url}
|
681
|
+
~~~
|
682
|
+
|
683
|
+
renders as
|
684
|
+
|
685
|
+
~~~ html
|
686
|
+
<a href="http://slim-lang.com">Goto the slim-lang.com</a>
|
687
|
+
~~~
|
688
|
+
|
689
|
+
The attribute value will be escaped if the option
|
690
|
+
|
691
|
+
~~~ options
|
692
|
+
:escape_quoted_attrs => true
|
693
|
+
~~~
|
694
|
+
|
695
|
+
is set. Use == if you want to disable escaping in the attribute.
|
696
|
+
|
697
|
+
~~~ slim
|
698
|
+
li
|
699
|
+
a href='&' Link
|
700
|
+
li
|
701
|
+
a href=="&" Link
|
702
|
+
~~~
|
703
|
+
|
704
|
+
renders as
|
705
|
+
|
706
|
+
~~~ html
|
707
|
+
<li>
|
708
|
+
<a href="&">Link</a>
|
709
|
+
</li>
|
710
|
+
<li>
|
711
|
+
<a href="&">Link</a>
|
712
|
+
</li>
|
713
|
+
~~~
|
714
|
+
|
715
|
+
#### Ruby attributes
|
716
|
+
|
717
|
+
#### Boolean attributes
|
718
|
+
|
719
|
+
The attribute values `true`, `false` and `nil` are interpreted as booleans.
|
720
|
+
If you use the attribut wrapper you can omit the attribute assigment.
|
721
|
+
|
722
|
+
~~~ slim
|
723
|
+
- true_value1 = ""
|
724
|
+
- true_value2 = true
|
725
|
+
input type="text" disabled=true_value1
|
726
|
+
input type="text" disabled=true_value2
|
727
|
+
input type="text" disabled="disabled"
|
728
|
+
input type="text" disabled=true
|
729
|
+
input(type="text" disabled)
|
730
|
+
~~~
|
731
|
+
|
732
|
+
renders as
|
733
|
+
|
734
|
+
~~~ html
|
735
|
+
<input disabled="" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" /><input disabled="disabled" type="text" />
|
736
|
+
~~~
|
737
|
+
|
738
|
+
~~~ slim
|
739
|
+
- false_value1 = false
|
740
|
+
- false_value2 = nil
|
741
|
+
input type="text" disabled=false_value1
|
742
|
+
input type="text" disabled=false_value2
|
743
|
+
input type="text"
|
744
|
+
input type="text" disabled=false
|
745
|
+
input type="text" disabled=nil
|
746
|
+
~~~
|
747
|
+
|
748
|
+
renders as
|
749
|
+
|
750
|
+
~~~ html
|
751
|
+
<input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="text" />
|
752
|
+
~~~
|
753
|
+
|
754
|
+
#### Attribute merging
|
755
|
+
|
756
|
+
You can configure attributes to be merged if multiple are given (See option `:attr_delimiter`). In the default configuration
|
757
|
+
this is done for class attributes with the white space as delimiter.
|
758
|
+
|
759
|
+
~~~ slim
|
760
|
+
a.menu class="highlight" href="http://slim-lang.com/" Slim-lang.com
|
761
|
+
~~~
|
762
|
+
|
763
|
+
renders as
|
764
|
+
|
765
|
+
~~~ html
|
766
|
+
<a class="menu highlight" href="http://slim-lang.com/">Slim-lang.com</a>
|
767
|
+
~~~
|
768
|
+
|
769
|
+
You can also use an `Array` as attribute value and the array elements will be merged using the delimiter.
|
770
|
+
|
771
|
+
~~~ slim
|
772
|
+
- classes = [:alpha, :beta]
|
773
|
+
span class=["first","highlight"] class=classes First
|
774
|
+
span class=:second,:highlight class=classes Second
|
775
|
+
~~~
|
776
|
+
|
777
|
+
renders as
|
778
|
+
|
779
|
+
~~~ html
|
780
|
+
<span class="first highlight alpha beta">First</span><span class="second highlight alpha beta">Second</span>
|
781
|
+
~~~
|
782
|
+
|
783
|
+
#### Splat attributes `*`
|
784
|
+
|
785
|
+
#### ID shortcut and class shortcut `.`
|
786
|
+
|
787
|
+
#### Attribute shortcuts
|
788
|
+
|
789
|
+
We add `&` to create a shortcut for the input elements with type attribute by setting the option `:shortcut`.
|
790
|
+
|
791
|
+
~~~ options
|
792
|
+
:shortcut => {'&' => 'input type', '#' => 'id', '.' => 'class' }
|
793
|
+
~~~
|
794
|
+
|
795
|
+
~~~ slim
|
796
|
+
&text name="user"
|
797
|
+
&password name="pw"
|
798
|
+
&submit
|
799
|
+
~~~
|
800
|
+
|
801
|
+
renders to
|
802
|
+
|
803
|
+
~~~ html
|
804
|
+
<input name="user" type="text" /><input name="pw" type="password" /><input type="submit" />
|
805
|
+
~~~
|
806
|
+
|
807
|
+
## Text interpolation
|
808
|
+
|
809
|
+
Use standard Ruby interpolation. The text will be html escaped by default.
|
810
|
+
|
811
|
+
~~~ slim
|
812
|
+
- user="John Doe <john@doe.net>"
|
813
|
+
h1 Welcome #{user}!
|
814
|
+
~~~
|
815
|
+
|
816
|
+
renders as
|
817
|
+
|
818
|
+
~~~ html
|
819
|
+
<h1>Welcome John Doe <john@doe.net>!</h1>
|
820
|
+
~~~
|
821
|
+
|
822
|
+
## Embedded engines
|
823
|
+
|
824
|
+
## Configuring Slim
|
825
|
+
|
826
|
+
## Plugins
|
827
|
+
|
828
|
+
### Logic less mode
|
829
|
+
|
830
|
+
### Translator
|