markdown-ui 0.1.7 → 0.1.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog +14 -0
  3. data/TODO.md +44 -0
  4. data/components/elements/markdown-ui-button/lib/button/basic.rb +1 -1
  5. data/components/elements/markdown-ui-button/lib/button/custom.rb +1 -1
  6. data/components/elements/markdown-ui-button/lib/button/focusable.rb +4 -13
  7. data/components/elements/markdown-ui-button/lib/button/icon.rb +1 -1
  8. data/components/elements/markdown-ui-button/lib/button/labeled_icon.rb +1 -1
  9. data/components/elements/markdown-ui-button/lib/button/standard.rb +1 -1
  10. data/components/elements/markdown-ui-header/lib/header/header.rb +7 -4
  11. data/lib/markdown-ui/tag/button_tag.rb +27 -0
  12. data/lib/markdown-ui/tag/focusable_button_tag.rb +27 -0
  13. data/lib/markdown-ui/version.rb +1 -1
  14. data/website/about.html +41 -0
  15. data/website/about.md +27 -0
  16. data/website/compile.sh +12 -3
  17. data/website/{button.html → docs/button.html} +196 -125
  18. data/website/{button.md → docs/button.md} +163 -77
  19. data/website/docs/toc.html +75 -0
  20. data/website/docs/toc.md +46 -0
  21. data/website/index.html +18 -497
  22. data/website/index.md +19 -542
  23. metadata +11 -4
data/website/{button.html → docs/button.html} RENAMED
@@ -18,45 +18,40 @@
18
18
  </style>
19
19
  </head>
20
20
  <body>
21
- <div class="ui sticky inverted vertical menu">
22
- <a class="ui active item" href="button.html">Button</a>
23
- <a class="ui item" href="button.html">Button</a>
24
- <a class="ui item" href="button.html">Button</a>
25
- <a class="ui item" href="button.html">Button</a>
26
- </div>
27
-
28
- <!-- -->
29
- <div class="ui inverted segment container">
30
- <div class="ui inverted menu">
31
- <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
32
- <div class="ui inverted right menu">
33
- <a class="ui disabled item" href="#docs">Docs</a>
34
- <a class="ui disabled item" href="#about">About</a>
35
- <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
36
- <a class="ui disabled item" href="#install">Install</a>
21
+ <div class="ui container">
22
+ <div class="ui inverted segment">
23
+ <div class="ui inverted menu">
24
+ <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
25
+ <div class="ui inverted right menu">
26
+ <a class="ui item" href="toc.html">Table of Contents</a>
27
+ <a class="ui item" href="../about.html">About</a>
28
+ <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
29
+ <a class="ui item" href="../index.html#install">Install</a>
30
+ </div>
37
31
  </div>
38
32
  </div>
39
- </div>
40
-
41
33
  <!-- -->
42
- <div class="ui left aligned container">
43
- <div class="ui segment">
44
- <h1 class="ui center aligned header">Buttons</h1>
34
+ <div class="ui basic segment">
35
+ <h1 id="button" class="ui center aligned header">Button</h1>
45
36
  </div>
46
37
  <!-- -->
47
- <div class="ui segment">
48
- <h3 class="ui header">Button</h3>
38
+ <div class="ui basic segment">
39
+ <h2 id="types" class="ui dividing left aligned header">Types</h2>
40
+ </div>
41
+ <!-- -->
42
+ <div class="ui basic segment">
43
+ <h4 id="simple-button" class="ui header">Button</h4>
49
44
  <p>Standard Button</p>
50
45
  </div>
51
46
  <!-- -->
52
47
  <div class="ui divided segment grid">
53
- <div class="ui html top attached segment">
48
+ <div class="ui attached segment">
54
49
  <div class="ui top attached label">Standard Button</div>
55
50
  </div>
56
51
  <!-- -->
57
52
  <div class="ui center aligned six wide column">
58
53
  <h5 class="ui header">Preview</h5>
59
- <div class="ui button">Follow</div>
54
+ <button class="ui button">Follow</button>
60
55
  </div>
61
56
  <!-- -->
62
57
  <div class="ui left aligned ten wide column">
@@ -71,13 +66,13 @@ __Button|Follow__
71
66
  </div>
72
67
  <!-- -->
73
68
  <div class="ui divided segment grid">
74
- <div class="ui html top attached segment">
69
+ <div class="ui attached segment">
75
70
  <div class="ui top attached label">Standard Button with Custom Class And ID</div>
76
71
  </div>
77
72
  <!-- -->
78
73
  <div class="ui center aligned six wide column">
79
74
  <h5 class="ui header">Preview</h5>
80
- <div id="optional-id" class="ui optional-class button">Follow</div>
75
+ <button id="optional-id" class="ui optional-class button">Follow</button>
81
76
  </div>
82
77
  <!-- -->
83
78
  <div class="ui left aligned ten wide column">
@@ -90,43 +85,41 @@ __Button|Follow__
90
85
  </div>
91
86
  <!-- -->
92
87
  <div class="ui divided segment grid">
93
- <div class="ui html top attached segment">
88
+ <div class="ui attached segment">
94
89
  <div class="ui top attached label">Focusable Button</div>
95
90
  </div>
96
91
  <!-- -->
97
92
  <div class="ui center aligned six wide column">
98
93
  <h5 class="ui header">Preview</h5>
99
- <button id="optional-id" class="ui focusable button">Follow</button>
94
+ <div id="optional-id" class="ui focusable button" tabindex="0">Follow</div>
100
95
  </div>
101
96
  <!-- -->
102
97
  <div class="ui left aligned ten wide column">
103
98
  <h5 class="ui header">Markdown Syntax</h5>
104
99
  <div class="ui inverted very padded segment">
105
- <code>
106
- __Focusable Button|Follow|&lt;Optional-ID&gt;__
107
- </code>
100
+ <code>__Focusable Button|Follow|&lt;Optional-ID&gt;__</code>
108
101
  </div>
109
102
  </div>
110
103
  <!-- -->
111
104
  </div>
112
105
  <!-- -->
113
- <div class="ui attached segment">
114
- <h3 class="ui header">Emphasis</h3>
106
+ <div class="ui basic segment">
107
+ <h4 id="emphasis" class="ui header">Emphasis</h4>
115
108
  <p>A button can be formatted to show different levels of emphasis</p>
116
109
  </div>
117
110
  <!-- -->
118
111
  <div class="ui divided segment grid">
119
- <div class="ui html top attached segment">
112
+ <div class="ui attached segment">
120
113
  <div class="ui top attached label">Emphasis</div>
121
114
  </div>
122
115
  <!-- -->
123
116
  <div class="ui center aligned six wide column">
124
117
  <h5 class="ui header">Preview</h5>
125
- <div class="ui primary button">Save</div>
126
- <div class="ui button">Discard</div>
118
+ <button class="ui primary button">Save</button>
119
+ <button class="ui button">Discard</button>
127
120
  <p></p>
128
- <div class="ui secondary button">Save</div>
129
- <div class="ui button">Discard</div>
121
+ <button class="ui secondary button">Save</button>
122
+ <button class="ui button">Discard</button>
130
123
  </div>
131
124
  <!-- -->
132
125
  <div class="ui left aligned ten wide column">
@@ -139,13 +132,13 @@ __Focusable Button|Follow|&lt;Optional-ID&gt;__
139
132
  <!-- -->
140
133
  </div>
141
134
  <!-- -->
142
- <div class="ui attached segment">
143
- <h3 class="ui header">Animated</h3>
135
+ <div class="ui basic segment">
136
+ <h4 id="animated" class="ui header">Animated</h4>
144
137
  <p>A button can animate to show hidden content</p>
145
138
  </div>
146
139
  <!-- -->
147
140
  <div class="ui divided segment grid">
148
- <div class="ui html top attached segment">
141
+ <div class="ui attached segment">
149
142
  <div class="ui top attached label">Animated</div>
150
143
  </div>
151
144
  <!-- -->
@@ -162,16 +155,14 @@ __Focusable Button|Follow|&lt;Optional-ID&gt;__
162
155
  <div class="ui left aligned ten wide column">
163
156
  <h5 class="ui header">Markdown Syntax</h5>
164
157
  <div class="ui inverted very padded segment">
165
- <code>
166
- __Animated Button|Next;Icon:Right Arrow__
167
- </code>
158
+ <code>__Animated Button|Next;Icon:Right Arrow__</code>
168
159
  </div>
169
160
  </div>
170
161
  <!-- -->
171
162
  </div>
172
163
  <!-- -->
173
164
  <div class="ui divided segment grid">
174
- <div class="ui html top attached segment">
165
+ <div class="ui attached segment">
175
166
  <div class="ui top attached label">Vertical Animated</div>
176
167
  </div>
177
168
  <!-- -->
@@ -188,16 +179,14 @@ __Animated Button|Next;Icon:Right Arrow__
188
179
  <div class="ui left aligned ten wide column">
189
180
  <h5 class="ui header">Markdown Syntax</h5>
190
181
  <div class="ui inverted very padded segment">
191
- <code>
192
- __Vertical Animated Button|Icon:Shop;Shop__
193
- </code>
182
+ <code>__Vertical Animated Button|Icon:Shop;Shop__</code>
194
183
  </div>
195
184
  </div>
196
185
  <!-- -->
197
186
  </div>
198
187
  <!-- -->
199
188
  <div class="ui divided segment grid">
200
- <div class="ui html top attached segment">
189
+ <div class="ui attached segment">
201
190
  <div class="ui top attached label">Fade Animated</div>
202
191
  </div>
203
192
  <!-- -->
@@ -218,103 +207,98 @@ __Vertical Animated Button|Icon:Shop;Shop__
218
207
  <!-- -->
219
208
  </div>
220
209
  <!-- -->
221
- <div class="ui attached segment">
222
- <h3 class="ui header">Icon</h3>
210
+ <div class="ui basic segment">
211
+ <h4 id="icon" class="ui header">Icon</h4>
223
212
  <p>A button can have only an icon</p>
224
213
  </div>
225
214
  <!-- -->
226
215
  <div class="ui divided segment grid">
227
- <div class="ui html top attached segment">
216
+ <div class="ui attached segment">
228
217
  <div class="ui top attached label">Icon Button</div>
229
218
  </div>
230
219
  <!-- -->
231
220
  <div class="ui center aligned six wide column">
232
221
  <h5 class="ui header">Preview</h5>
233
- <div class="ui icon button">
222
+ <button class="ui icon button">
234
223
  <i class="cloud icon"></i>
235
- </div>
224
+ </button>
236
225
  </div>
237
226
  <!-- -->
238
227
  <div class="ui left aligned ten wide column">
239
228
  <h5 class="ui header">Markdown Syntax</h5>
240
229
  <div class="ui inverted very padded segment">
241
230
  <code>
242
- __Icon Button|Icon:Cloud__
243
- </code>
231
+ __Icon Button|Icon</code>
244
232
  </div>
245
233
  </div>
246
234
  <!-- -->
247
235
  </div>
248
236
  <!-- -->
249
- <div class="ui attached segment">
250
- <h3 class="ui header">Labeled Icon</h3>
237
+ <div class="ui basic segment">
238
+ <h4 id="labeled-icon" class="ui header">Labeled Icon</h4>
251
239
  <p>A button can have an icon and a label</p>
252
240
  </div>
253
241
  <!-- -->
254
242
  <div class="ui divided segment grid">
255
- <div class="ui html top attached segment">
243
+ <div class="ui attached segment">
256
244
  <div class="ui top attached label">Labeled Icon</div>
257
245
  </div>
258
246
  <!-- -->
259
247
  <div class="ui center aligned six wide column">
260
248
  <h5 class="ui header">Preview</h5>
261
- <div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
249
+ <button class="ui labeled icon button"><i class="pause icon"></i>Pause</button>
262
250
  </div>
263
251
  <!-- -->
264
252
  <div class="ui left aligned ten wide column">
265
253
  <h5 class="ui header">Markdown Syntax</h5>
266
254
  <div class="ui inverted very padded segment">
267
- <code>
268
- __Labeled Icon Button|Icon:Pause,Pause__
269
- </code>
255
+ <code>__Labeled Icon Button|Icon:Pause,Pause__</code>
270
256
  </div>
271
257
  </div>
272
258
  <!-- -->
273
259
  </div>
274
260
  <!-- -->
275
- <div class="ui attached segment">
276
- <h3 class="ui header">Basic Button</h3>
261
+ <div class="ui basic segment">
262
+ <h4 id="basic-button" class="ui header">Basic Button</h4>
277
263
  <p>A basic button is less pronounced</p>
278
264
  </div>
279
265
  <!-- -->
280
266
  <div class="ui divided segment grid">
281
- <div class="ui html top attached segment">
267
+ <div class="ui attached segment">
282
268
  <div class="ui top attached label">Basic Button</div>
283
269
  </div>
284
270
  <!-- -->
285
271
  <div class="ui center aligned six wide column">
286
272
  <h5 class="ui header">Preview</h5>
287
- <div class="ui basic button"><i class="user icon"></i>Add Friend</div>
273
+ <button class="ui basic button"><i class="user icon"></i>Add Friend</button>
288
274
  </div>
289
275
  <!-- -->
290
276
  <div class="ui left aligned ten wide column">
291
277
  <h5 class="ui header">Markdown Syntax</h5>
292
278
  <div class="ui inverted very padded segment">
293
- <code>
294
- __Basic Button|Icon:User,Add Friend__
295
- </code>
279
+ <code>__Basic Button|Icon:User,Add Friend__</code>
296
280
  </div>
297
281
  </div>
298
282
  <!-- -->
299
283
  </div>
300
284
  <!-- -->
301
285
  <div class="ui divided segment grid">
302
- <div class="ui html top attached segment">
286
+ <div class="ui attached segment">
303
287
  <div class="ui top attached label">Basic Button</div>
304
288
  </div>
305
289
  <!-- -->
306
290
  <div class="ui center aligned six wide column">
307
291
  <h5 class="ui header">Preview</h5>
308
- <div class="ui basic standard button">Standard</div>
309
- <div class="ui basic black button">Black</div>
310
- <div class="ui basic yellow button">Yellow</div>
311
- <div class="ui basic green button">Green</div>
312
- <div class="ui basic blue button">Blue</div>
313
- <div class="ui basic orange button">Orange</div>
314
- <div class="ui basic purple button">Purple</div>
315
- <div class="ui basic pink button">Pink</div>
316
- <div class="ui basic red button">Red</div>
317
- <div class="ui basic teal button">Teal</div>
292
+ <button class="ui basic standard button">Standard</button>
293
+ <button class="ui basic black button">Black</button>
294
+ <button class="ui basic yellow button">Yellow</button>
295
+ <button class="ui basic green button">Green</button>
296
+ <button class="ui basic blue button">Blue</button>
297
+ <button class="ui basic orange button">Orange</button>
298
+ <button class="ui basic purple button">Purple</button>
299
+ <button class="ui basic pink button">Pink</button>
300
+ <button class="ui basic red button">Red</button>
301
+ <button class="ui basic teal button">Teal</button>
318
302
  </div>
319
303
  <!-- -->
320
304
  <div class="ui left aligned ten wide column">
@@ -335,29 +319,29 @@ __Basic Button|Icon:User,Add Friend__
335
319
  <!-- -->
336
320
  </div>
337
321
  <!-- -->
338
- <div class="ui attached segment">
339
- <h3 class="ui header">Inverted</h3>
322
+ <div class="ui basic segment">
323
+ <h4 id="inverted" class="ui header">Inverted</h4>
340
324
  <p>A button can be formatted to appear on dark backgrounds</p>
341
325
  </div>
342
326
  <!-- -->
343
327
  <div class="ui divided segment grid">
344
- <div class="ui html top attached segment">
328
+ <div class="ui attached segment">
345
329
  <div class="ui top attached label">Inverted</div>
346
330
  </div>
347
331
  <!-- -->
348
332
  <div class="ui center aligned six wide column">
349
333
  <h5 class="ui header">Preview</h5>
350
334
  <div class="ui inverted very padded segment">
351
- <div class="ui inverted standard button">Standard</div>
352
- <div class="ui inverted black button">Black</div>
353
- <div class="ui inverted yellow button">Yellow</div>
354
- <div class="ui inverted green button">Green</div>
355
- <div class="ui inverted blue button">Blue</div>
356
- <div class="ui inverted orange button">Orange</div>
357
- <div class="ui inverted purple button">Purple</div>
358
- <div class="ui inverted pink button">Pink</div>
359
- <div class="ui inverted red button">Red</div>
360
- <div class="ui inverted teal button">Teal</div>
335
+ <button class="ui inverted standard button">Standard</button>
336
+ <button class="ui inverted black button">Black</button>
337
+ <button class="ui inverted yellow button">Yellow</button>
338
+ <button class="ui inverted green button">Green</button>
339
+ <button class="ui inverted blue button">Blue</button>
340
+ <button class="ui inverted orange button">Orange</button>
341
+ <button class="ui inverted purple button">Purple</button>
342
+ <button class="ui inverted pink button">Pink</button>
343
+ <button class="ui inverted red button">Red</button>
344
+ <button class="ui inverted teal button">Teal</button>
361
345
  </div>
362
346
  </div>
363
347
  <!-- -->
@@ -380,22 +364,26 @@ __Basic Button|Icon:User,Add Friend__
380
364
  <!-- -->
381
365
  </div>
382
366
  <!-- -->
383
- <div class="ui attached segment">
384
- <h3 class="ui header">Groups</h3>
367
+ <div class="ui basic segment">
368
+ <h2 id="groups" class="ui dividing left aligned header">Groups</h2>
369
+ </div>
370
+ <!-- -->
371
+ <div class="ui basic segment">
372
+ <h4 id="buttons" class="ui header">Buttons</h4>
385
373
  <p>Buttons can exist together as a group</p>
386
374
  </div>
387
375
  <!-- -->
388
376
  <div class="ui divided segment grid">
389
- <div class="ui html top attached segment">
377
+ <div class="ui attached segment">
390
378
  <div class="ui top attached label">Buttons</div>
391
379
  </div>
392
380
  <!-- -->
393
381
  <div class="ui center aligned six wide column">
394
382
  <h5 class="ui header">Preview</h5>
395
383
  <div class="ui buttons">
396
- <div id="standard" class="ui button">One</div>
397
- <div id="standard" class="ui button">Two</div>
398
- <div id="standard" class="ui button">Three</div>
384
+ <button id="standard" class="ui button">One</button>
385
+ <button id="standard" class="ui button">Two</button>
386
+ <button id="standard" class="ui button">Three</button>
399
387
  </div>
400
388
  </div>
401
389
  <!-- -->
@@ -411,43 +399,43 @@ __Basic Button|Icon:User,Add Friend__
411
399
  <!-- -->
412
400
  </div>
413
401
  <!-- -->
414
- <div class="ui attached segment">
415
- <h3 class="ui header">Icon Buttons</h3>
402
+ <div class="ui basic segment">
403
+ <h4 id="icon-buttons" class="ui header">Icon Buttons</h4>
416
404
  <p>Buttons can exist together as a group</p>
417
405
  </div>
418
406
  <!-- -->
419
407
  <div class="ui divided segment grid">
420
- <div class="ui html top attached segment">
408
+ <div class="ui attached segment">
421
409
  <div class="ui top attached label">Buttons</div>
422
410
  </div>
423
411
  <!-- -->
424
412
  <div class="ui center aligned six wide column">
425
413
  <h5 class="ui header">Preview</h5>
426
414
  <div class="ui icon buttons">
427
- <div class="ui button">
415
+ <button class="ui button">
428
416
  <i class="align left icon"></i>
429
- </div>
430
- <div class="ui button">
417
+ </button>
418
+ <button class="ui button">
431
419
  <i class="align center icon"></i>
432
- </div>
433
- <div class="ui button">
420
+ </button>
421
+ <button class="ui button">
434
422
  <i class="align right icon"></i>
435
- </div>
436
- <div class="ui button">
423
+ </button>
424
+ <button class="ui button">
437
425
  <i class="align justify icon"></i>
438
- </div>
426
+ </button>
439
427
  </div>
440
428
  <!-- -->
441
429
  <div class="ui icon buttons">
442
- <div class="ui button">
430
+ <button class="ui button">
443
431
  <i class="bold icon"></i>
444
- </div>
445
- <div class="ui button">
432
+ </button>
433
+ <button class="ui button">
446
434
  <i class="underline icon"></i>
447
- </div>
448
- <div class="ui button">
435
+ </button>
436
+ <button class="ui button">
449
437
  <i class="text width icon"></i>
450
- </div>
438
+ </button>
451
439
  </div>
452
440
  </div>
453
441
  <!-- -->
@@ -469,22 +457,26 @@ __Basic Button|Icon:User,Add Friend__
469
457
  <!-- -->
470
458
  </div>
471
459
  <!-- -->
472
- <div class="ui attached segment">
473
- <h3 class="ui header">Conditionals</h3>
460
+ <div class="ui basic segment">
461
+ <h2 id="content" class="ui dividing left aligned header">Content</h2>
462
+ </div>
463
+ <!-- -->
464
+ <div class="ui basic segment">
465
+ <h4 id="conditionals" class="ui header">Conditionals</h4>
474
466
  <p>Button groups can contain conditionals</p>
475
467
  </div>
476
468
  <!-- -->
477
469
  <div class="ui divided segment grid">
478
- <div class="ui html top attached segment">
470
+ <div class="ui attached segment">
479
471
  <div class="ui top attached label">Conditionals</div>
480
472
  </div>
481
473
  <!-- -->
482
474
  <div class="ui center aligned six wide column">
483
475
  <h5 class="ui header">Preview</h5>
484
476
  <div class="ui buttons">
485
- <div class="ui button">Cancel</div>
477
+ <button class="ui button">Cancel</button>
486
478
  <div class="or"></div>
487
- <div class="ui positive button">Save</div>
479
+ <button class="ui positive button">Save</button>
488
480
  </div>
489
481
  </div>
490
482
  <!-- -->
@@ -501,9 +493,9 @@ __Basic Button|Icon:User,Add Friend__
501
493
  <div class="ui center aligned six wide column">
502
494
  <h5 class="ui header">Preview</h5>
503
495
  <div class="ui buttons">
504
- <div class="ui button">un</div>
496
+ <button class="ui button">un</button>
505
497
  <div class="or" data-text="ou"></div>
506
- <div id="optional-id" class="ui positive button">deux</div>
498
+ <button id="optional-id" class="ui positive button">deux</button>
507
499
  </div>
508
500
  </div>
509
501
  <!-- -->
@@ -518,6 +510,85 @@ __Basic Button|Icon:User,Add Friend__
518
510
  </div>
519
511
  <!-- -->
520
512
  </div>
513
+ <!-- -->
514
+ <div class="ui basic segment">
515
+ <h2 id="states" class="ui dividing left aligned header">States</h2>
516
+ </div>
517
+ <!-- -->
518
+ <div class="ui basic segment">
519
+ <h4 id="active" class="ui header">Active</h4>
520
+ <p>A button can show it is currently the active user selection</p>
521
+ </div>
522
+ <!-- -->
523
+ <div class="ui divided segment grid">
524
+ <div class="ui attached segment">
525
+ <div class="ui top attached label">Active State</div>
526
+ </div>
527
+ <!-- -->
528
+ <div class="ui center aligned six wide column">
529
+ <h5 class="ui header">Preview</h5>
530
+ <button class="ui active button"><i class="user icon"></i>Follow</button>
531
+ </div>
532
+ <!-- -->
533
+ <div class="ui left aligned ten wide column">
534
+ <h5 class="ui header">Markdown Syntax</h5>
535
+ <div class="ui inverted very padded segment">
536
+ <code>__Active Button|Icon:User, Follow__</code>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ <!-- -->
541
+ <div class="ui basic segment">
542
+ <h4 id="disabled" class="ui header">Disabled</h4>
543
+ <p>A button can show it is currently unable to be interacted with</p>
544
+ </div>
545
+ <!-- -->
546
+ <div class="ui divided segment grid">
547
+ <div class="ui attached segment">
548
+ <div class="ui top attached label">Disabled State</div>
549
+ </div>
550
+ <!-- -->
551
+ <div class="ui center aligned six wide column">
552
+ <h5 class="ui header">Preview</h5>
553
+ <button class="ui disabled button"><i class="user icon"></i>Followed</button>
554
+ </div>
555
+ <!-- -->
556
+ <div class="ui left aligned ten wide column">
557
+ <h5 class="ui header">Markdown Syntax</h5>
558
+ <div class="ui inverted very padded segment">
559
+ <code>__Disabled Button|Icon:User,Followed__</code>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ <!-- -->
564
+ <div class="ui basic segment">
565
+ <h4 id="loading" class="ui header">Loading</h4>
566
+ <p>A button can show a loading indicator</p>
567
+ </div>
568
+ <!-- -->
569
+ <div class="ui divided segment grid">
570
+ <div class="ui attached segment">
571
+ <div class="ui top attached label">Loading State</div>
572
+ </div>
573
+ <!-- -->
574
+ <div class="ui center aligned six wide column">
575
+ <h5 class="ui header">Preview</h5>
576
+ <button class="ui loading button">Loading</button>
577
+ <button class="ui basic loading button">Loading</button>
578
+ <button class="ui primary loading button">Loading</button>
579
+ <button class="ui secondary loading button">Loading</button>
580
+ </div>
581
+ <!-- -->
582
+ <div class="ui left aligned ten wide column">
583
+ <h5 class="ui header">Markdown Syntax</h5>
584
+ <div class="ui inverted very padded segment">
585
+ <code>__Loading Button|Loading__</code>
586
+ <br /><code>__Basic Loading Button|Loading__</code>
587
+ <br /><code>__Primary Loading Button|Loading__</code>
588
+ <br /><code>__Secondary Loading Button|Loading__</code>
589
+ </div>
590
+ </div>
591
+ </div>
521
592
  </div>
522
593
 
523
594
  </body>