markdown-ui 0.1.7 → 0.1.8

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.
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>