markdown-ui 0.1.8 → 0.1.9
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.
- checksums.yaml +4 -4
- data/Changelog +20 -0
- data/TODO.md +15 -15
- data/exe/markdown-ui +5 -7
- data/lib/markdown-ui/version.rb +1 -1
- data/website/about.html +23 -18
- data/website/compile.sh +2 -2
- data/website/docs/button.html +639 -60
- data/website/docs/button.md +509 -3
- data/website/docs/toc.html +46 -17
- data/website/docs/toc.md +24 -0
- data/website/index.html +105 -61
- data/website/index.md +2 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8d531589746787c5cad7b69c7a2f976aaf2f147c
|
|
4
|
+
data.tar.gz: a244562c9ce78161dd386ad5deee124f5add2e0a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 046355cdb7a12e0e25a43368eb7fc2beeac2ae88238b4f3df24d664cca70109b362be6fefcae7813b1ecbab798ff370807dd7f8940523325d95513b780d8a1c5
|
|
7
|
+
data.tar.gz: 560e20814eccaaad14ce9df1c2ad707a0172823f440ed79e7b67503a6ca2707b40c3938ae43f4ce68fc1fcac3a43cb6dd37661d0f7430756654884207871b885
|
data/Changelog
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
0.1.9 - 08-12-15
|
|
2
|
+
* Generate HTML5 doctype document (previously XHTML)
|
|
3
|
+
* Added the following button tests and documentation
|
|
4
|
+
- Variations
|
|
5
|
+
- Social
|
|
6
|
+
- Size
|
|
7
|
+
- Colored
|
|
8
|
+
- Compact
|
|
9
|
+
- Positive
|
|
10
|
+
- Negative
|
|
11
|
+
- Fluid
|
|
12
|
+
- Circular
|
|
13
|
+
- Vertically Attached
|
|
14
|
+
- Horizontally Attached
|
|
15
|
+
- Group Variations
|
|
16
|
+
- Vertical Buttons
|
|
17
|
+
- Icon Buttons
|
|
18
|
+
- Labeled Icon Buttons
|
|
19
|
+
- Mixed Group
|
|
20
|
+
|
|
1
21
|
0.1.8 - 08-12-15
|
|
2
22
|
* <button> tag added
|
|
3
23
|
* Explicitly use button tag in all button elements except
|
data/TODO.md
CHANGED
|
@@ -21,23 +21,23 @@
|
|
|
21
21
|
√ Loading
|
|
22
22
|
|
|
23
23
|
* Variations
|
|
24
|
-
Social
|
|
25
|
-
Size
|
|
26
|
-
Colored
|
|
27
|
-
Compact
|
|
28
|
-
Toggle
|
|
29
|
-
Positive
|
|
30
|
-
Negative
|
|
31
|
-
Fluid
|
|
32
|
-
Circular
|
|
33
|
-
Vertically Attached
|
|
34
|
-
Horizontally Attached
|
|
24
|
+
√ Social
|
|
25
|
+
√ Size
|
|
26
|
+
√ Colored
|
|
27
|
+
√ Compact
|
|
28
|
+
∆ Toggle (Unsupported - feature requires custom Javascript)
|
|
29
|
+
√ Positive
|
|
30
|
+
√ Negative
|
|
31
|
+
√ Fluid
|
|
32
|
+
√ Circular
|
|
33
|
+
√ Vertically Attached
|
|
34
|
+
√ Horizontally Attached
|
|
35
35
|
|
|
36
36
|
* Group Variations
|
|
37
|
-
Vertical Buttons
|
|
38
|
-
Icon Buttons
|
|
39
|
-
Labeled Icon Buttons
|
|
40
|
-
Mixed Group
|
|
37
|
+
√ Vertical Buttons
|
|
38
|
+
√ Icon Buttons
|
|
39
|
+
√ Labeled Icon Buttons
|
|
40
|
+
√ Mixed Group
|
|
41
41
|
Equal Width
|
|
42
42
|
Colored Buttons
|
|
43
43
|
Basic Buttons
|
data/exe/markdown-ui
CHANGED
|
@@ -5,10 +5,11 @@ require "markdown-ui"
|
|
|
5
5
|
require "nokogiri"
|
|
6
6
|
|
|
7
7
|
parser = Redcarpet::Markdown.new(MarkdownUI::Renderer, quote: true, tables: true)
|
|
8
|
-
|
|
9
8
|
f = File.open(ARGV.first, 'r')
|
|
9
|
+
@content = parser.render f.read
|
|
10
|
+
f.close
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
puts <<-EOS
|
|
12
13
|
<!doctype html>
|
|
13
14
|
|
|
14
15
|
<html lang="en">
|
|
@@ -30,10 +31,7 @@ content = <<-EOS
|
|
|
30
31
|
</head>
|
|
31
32
|
|
|
32
33
|
<body>
|
|
33
|
-
#{
|
|
34
|
+
#{Nokogiri::XML(@content, &:noblanks).to_xhtml(indent: 2)}
|
|
34
35
|
</body>
|
|
35
36
|
</html>
|
|
36
|
-
EOS
|
|
37
|
-
f.close
|
|
38
|
-
|
|
39
|
-
puts Nokogiri::HTML(content, &:noblanks).to_xhtml(indent: 2)
|
|
37
|
+
EOS
|
data/lib/markdown-ui/version.rb
CHANGED
data/website/about.html
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
<!
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
|
|
3
|
+
<html lang="en">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css">
|
|
10
|
+
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
11
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js"></script>
|
|
12
|
+
|
|
13
|
+
<!--[if lt IE 9]>
|
|
12
14
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
13
15
|
<![endif]-->
|
|
14
|
-
|
|
15
|
-
<![CDATA[
|
|
16
|
+
<style>
|
|
16
17
|
code { white-space:pre }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
21
22
|
<div class="ui container">
|
|
22
23
|
<div class="ui inverted segment">
|
|
23
24
|
<div class="ui inverted menu">
|
|
@@ -32,7 +33,11 @@
|
|
|
32
33
|
</div>
|
|
33
34
|
<!-- -->
|
|
34
35
|
<div class="ui text container">
|
|
35
|
-
<div class="ui segment"><h2 class="ui header">About</h2><i>It [Markdown-UI] helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness! - Joel Bryan Juliano (author of Markdown-UI)</i><br /><h4 class="ui header">Markdown-UI is for
|
|
36
|
+
<div class="ui segment"><h2 class="ui header">About</h2><i>It [Markdown-UI] helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness! - Joel Bryan Juliano (author of Markdown-UI)</i><br /><h4 class="ui header">Markdown-UI is for</h4><i class="check icon"></i> creating responsive UIs for mobile and web <br />
|
|
37
|
+
<i class="check icon"></i> easily communicating your UI <br />
|
|
38
|
+
<i class="check icon"></i> rapid prototyping <br />
|
|
39
|
+
<i class="check icon"></i> being more productive by having less cognitive load <br />
|
|
40
|
+
<i class="check icon"></i> UI/UX brain-storming sessions via email, whiteboard, text editor, paper, etc. <br /></div>
|
|
36
41
|
</div>
|
|
37
42
|
<!-- -->
|
|
38
43
|
</div>
|
data/website/compile.sh
CHANGED
|
@@ -5,7 +5,7 @@ for i in *.md; do
|
|
|
5
5
|
name="$(basename $i .md)"
|
|
6
6
|
../exe/markdown-ui $name.md > $name.html
|
|
7
7
|
|
|
8
|
-
sed -ie 's
|
|
8
|
+
sed -ie 's/：/:/g' $name.html 2> /dev/null
|
|
9
9
|
rm -rf $name.htmle
|
|
10
10
|
done
|
|
11
11
|
|
|
@@ -14,6 +14,6 @@ for i in docs/*.md; do
|
|
|
14
14
|
name="$(basename $i .md)"
|
|
15
15
|
../exe/markdown-ui $i > docs/$name.html
|
|
16
16
|
|
|
17
|
-
sed -ie 's
|
|
17
|
+
sed -ie 's/：/:/g' docs/$name.html 2> /dev/null
|
|
18
18
|
rm -rf docs/$name.htmle
|
|
19
19
|
done
|
data/website/docs/button.html
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
<!
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
|
|
3
|
+
<html lang="en">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css">
|
|
10
|
+
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
11
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js"></script>
|
|
12
|
+
|
|
13
|
+
<!--[if lt IE 9]>
|
|
12
14
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
13
15
|
<![endif]-->
|
|
14
|
-
|
|
15
|
-
<![CDATA[
|
|
16
|
+
<style>
|
|
16
17
|
code { white-space:pre }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
21
22
|
<div class="ui container">
|
|
22
23
|
<div class="ui inverted segment">
|
|
23
24
|
<div class="ui inverted menu">
|
|
@@ -126,7 +127,8 @@ __Button|Follow__
|
|
|
126
127
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
127
128
|
<div class="ui inverted very padded segment">
|
|
128
129
|
<code>__Primary Button|Save__ __Button|Discard__</code>
|
|
129
|
-
<br
|
|
130
|
+
<br />
|
|
131
|
+
<code>__Secondary Button|Save__ __Button|Discard__</code>
|
|
130
132
|
</div>
|
|
131
133
|
</div>
|
|
132
134
|
<!-- -->
|
|
@@ -227,8 +229,7 @@ __Button|Follow__
|
|
|
227
229
|
<div class="ui left aligned ten wide column">
|
|
228
230
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
229
231
|
<div class="ui inverted very padded segment">
|
|
230
|
-
<code>
|
|
231
|
-
__Icon Button|Icon</code>
|
|
232
|
+
<code>__Icon Button|Icon:Cloud__</code>
|
|
232
233
|
</div>
|
|
233
234
|
</div>
|
|
234
235
|
<!-- -->
|
|
@@ -305,15 +306,24 @@ __Icon Button|Icon</code>
|
|
|
305
306
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
306
307
|
<div class="ui inverted very padded segment">
|
|
307
308
|
<code>__Basic Standard Button|Standard__</code>
|
|
308
|
-
<br
|
|
309
|
-
<
|
|
310
|
-
<br
|
|
311
|
-
<
|
|
312
|
-
<br
|
|
313
|
-
<
|
|
314
|
-
<br
|
|
315
|
-
<
|
|
316
|
-
<br
|
|
309
|
+
<br />
|
|
310
|
+
<code>__Basic Black Button|Black__</code>
|
|
311
|
+
<br />
|
|
312
|
+
<code>__Basic Yellow Button|Yellow__</code>
|
|
313
|
+
<br />
|
|
314
|
+
<code>__Basic Green Button|Green__</code>
|
|
315
|
+
<br />
|
|
316
|
+
<code>__Basic Blue Button|Blue__</code>
|
|
317
|
+
<br />
|
|
318
|
+
<code>__Basic Orange Button|Orange__</code>
|
|
319
|
+
<br />
|
|
320
|
+
<code>__Basic Purple Button|Purple__</code>
|
|
321
|
+
<br />
|
|
322
|
+
<code>__Basic Pink Button|Pink__</code>
|
|
323
|
+
<br />
|
|
324
|
+
<code>__Basic Red Button|Red__</code>
|
|
325
|
+
<br />
|
|
326
|
+
<code>__Basic Teal Button|Teal__</code>
|
|
317
327
|
</div>
|
|
318
328
|
</div>
|
|
319
329
|
<!-- -->
|
|
@@ -349,16 +359,26 @@ __Icon Button|Icon</code>
|
|
|
349
359
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
350
360
|
<div class="ui inverted very padded segment">
|
|
351
361
|
<code>> Inverted Segment:</code>
|
|
352
|
-
<br
|
|
353
|
-
<
|
|
354
|
-
<br
|
|
355
|
-
<
|
|
356
|
-
<br
|
|
357
|
-
<
|
|
358
|
-
<br
|
|
359
|
-
<
|
|
360
|
-
<br
|
|
361
|
-
<
|
|
362
|
+
<br />
|
|
363
|
+
<code>> __Inverted Standard Button|Standard__</code>
|
|
364
|
+
<br />
|
|
365
|
+
<code>> __Inverted Black Button|Black__</code>
|
|
366
|
+
<br />
|
|
367
|
+
<code>> __Inverted Yellow Button|Yellow__</code>
|
|
368
|
+
<br />
|
|
369
|
+
<code>> __Inverted Green Button|Green__</code>
|
|
370
|
+
<br />
|
|
371
|
+
<code>> __Inverted Blue Button|Blue__</code>
|
|
372
|
+
<br />
|
|
373
|
+
<code>> __Inverted Orange Button|Orange__</code>
|
|
374
|
+
<br />
|
|
375
|
+
<code>> __Inverted Purple Button|Purple__</code>
|
|
376
|
+
<br />
|
|
377
|
+
<code>> __Inverted Pink Button|Pink__</code>
|
|
378
|
+
<br />
|
|
379
|
+
<code>> __Inverted Red Button|Red__</code>
|
|
380
|
+
<br />
|
|
381
|
+
<code>> __Inverted Teal Button|Teal__</code>
|
|
362
382
|
</div>
|
|
363
383
|
</div>
|
|
364
384
|
<!-- -->
|
|
@@ -391,9 +411,12 @@ __Icon Button|Icon</code>
|
|
|
391
411
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
392
412
|
<div class="ui inverted very padded segment">
|
|
393
413
|
<code>> Buttons:</code>
|
|
394
|
-
<br
|
|
395
|
-
<
|
|
396
|
-
<br
|
|
414
|
+
<br />
|
|
415
|
+
<code>> __Standard Button|One__</code>
|
|
416
|
+
<br />
|
|
417
|
+
<code>> __Standard Button|Two__</code>
|
|
418
|
+
<br />
|
|
419
|
+
<code>> __Standard Button|Three__</code>
|
|
397
420
|
</div>
|
|
398
421
|
</div>
|
|
399
422
|
<!-- -->
|
|
@@ -443,15 +466,26 @@ __Icon Button|Icon</code>
|
|
|
443
466
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
444
467
|
<div class="ui inverted very padded segment">
|
|
445
468
|
<code>> Icon Buttons:</code>
|
|
446
|
-
<br
|
|
447
|
-
<
|
|
448
|
-
<br
|
|
449
|
-
<
|
|
450
|
-
<br
|
|
451
|
-
<
|
|
452
|
-
<br
|
|
453
|
-
<
|
|
454
|
-
<br
|
|
469
|
+
<br />
|
|
470
|
+
<code>> __Button|Icon:Align Left__</code>
|
|
471
|
+
<br />
|
|
472
|
+
<code>> __Button|Icon:Align Center__</code>
|
|
473
|
+
<br />
|
|
474
|
+
<code>> __Button|Icon:Align Right__</code>
|
|
475
|
+
<br />
|
|
476
|
+
<code>> __Button|Icon:Align Justify__</code>
|
|
477
|
+
<br />
|
|
478
|
+
<br />
|
|
479
|
+
<code><!-- A separator is required in between two spaces --></code>
|
|
480
|
+
<br />
|
|
481
|
+
<br />
|
|
482
|
+
<code>> Icon Buttons:</code>
|
|
483
|
+
<br />
|
|
484
|
+
<code>> __Button|Icon:Bold__</code>
|
|
485
|
+
<br />
|
|
486
|
+
<code>> __Button|Icon:Underline__</code>
|
|
487
|
+
<br />
|
|
488
|
+
<code>> __Button|Icon:Text Width__</code>
|
|
455
489
|
</div>
|
|
456
490
|
</div>
|
|
457
491
|
<!-- -->
|
|
@@ -484,9 +518,12 @@ __Icon Button|Icon</code>
|
|
|
484
518
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
485
519
|
<div class="ui inverted very padded segment">
|
|
486
520
|
<code>> Buttons:</code>
|
|
487
|
-
<br
|
|
488
|
-
<
|
|
489
|
-
<br
|
|
521
|
+
<br />
|
|
522
|
+
<code>> __Button|Cancel__</code>
|
|
523
|
+
<br />
|
|
524
|
+
<code>> __Div Tag||Or__</code>
|
|
525
|
+
<br />
|
|
526
|
+
<code>> __Positive Button|Save__</code>
|
|
490
527
|
</div>
|
|
491
528
|
</div>
|
|
492
529
|
<!-- -->
|
|
@@ -503,9 +540,12 @@ __Icon Button|Icon</code>
|
|
|
503
540
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
504
541
|
<div class="ui inverted very padded segment">
|
|
505
542
|
<code>> Buttons:</code>
|
|
506
|
-
<br
|
|
507
|
-
<
|
|
508
|
-
<br
|
|
543
|
+
<br />
|
|
544
|
+
<code>> __Button|un__</code>
|
|
545
|
+
<br />
|
|
546
|
+
<code>> __Div Tag||Or|Data:Text:ou__</code>
|
|
547
|
+
<br />
|
|
548
|
+
<code>> __Positive Button|deux|<Optional-ID>__</code>
|
|
509
549
|
</div>
|
|
510
550
|
</div>
|
|
511
551
|
<!-- -->
|
|
@@ -583,9 +623,548 @@ __Icon Button|Icon</code>
|
|
|
583
623
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
584
624
|
<div class="ui inverted very padded segment">
|
|
585
625
|
<code>__Loading Button|Loading__</code>
|
|
586
|
-
<br
|
|
587
|
-
<
|
|
588
|
-
<br
|
|
626
|
+
<br />
|
|
627
|
+
<code>__Basic Loading Button|Loading__</code>
|
|
628
|
+
<br />
|
|
629
|
+
<code>__Primary Loading Button|Loading__</code>
|
|
630
|
+
<br />
|
|
631
|
+
<code>__Secondary Loading Button|Loading__</code>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
</div>
|
|
635
|
+
<!-- -->
|
|
636
|
+
<div class="ui basic segment">
|
|
637
|
+
<h2 id="variations" class="ui dividing left aligned header">Variations</h2>
|
|
638
|
+
</div>
|
|
639
|
+
<!-- -->
|
|
640
|
+
<div class="ui basic segment">
|
|
641
|
+
<h4 id="social" class="ui header">Social</h4>
|
|
642
|
+
<p>A button can be formatted to link to a social website</p>
|
|
643
|
+
</div>
|
|
644
|
+
<!-- -->
|
|
645
|
+
<div class="ui divided segment grid">
|
|
646
|
+
<div class="ui attached segment">
|
|
647
|
+
<div class="ui top attached label">Social</div>
|
|
648
|
+
</div>
|
|
649
|
+
<!-- -->
|
|
650
|
+
<div class="ui center aligned six wide column">
|
|
651
|
+
<h5 class="ui header">Preview</h5>
|
|
652
|
+
<button class="ui facebook button"><i class="facebook icon"></i>Facebook</button>
|
|
653
|
+
<button class="ui twitter button"><i class="twitter icon"></i>Twitter</button>
|
|
654
|
+
<button class="ui google plus button"><i class="google plus icon"></i>Google Plus</button>
|
|
655
|
+
<button class="ui vk button"><i class="vk icon"></i>VK</button>
|
|
656
|
+
<button class="ui linkedin button"><i class="linkedin icon"></i>LinkedIn</button>
|
|
657
|
+
<button class="ui instagram button"><i class="instagram icon"></i>Instagram</button>
|
|
658
|
+
<button class="ui youtube button"><i class="youtube icon"></i>YouTube</button>
|
|
659
|
+
</div>
|
|
660
|
+
<!-- -->
|
|
661
|
+
<div class="ui left aligned ten wide column">
|
|
662
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
663
|
+
<div class="ui inverted very padded segment">
|
|
664
|
+
<code>__Facebook Button|Icon:Facebook, Facebook__</code>
|
|
665
|
+
<br />
|
|
666
|
+
<code>__Twitter Button|Icon:Twitter, Twitter__</code>
|
|
667
|
+
<br />
|
|
668
|
+
<code>__Google Plus Button|Icon:Google Plus, Google Plus__</code>
|
|
669
|
+
<br />
|
|
670
|
+
<code>__VK Button|Icon:VK, VK__</code>
|
|
671
|
+
<br />
|
|
672
|
+
<code>__LinkedIn Button|Icon:LinkedIn, LinkedIn__</code>
|
|
673
|
+
<br />
|
|
674
|
+
<code>__Instagram Button|Icon:Instagram, Instagram__</code>
|
|
675
|
+
<br />
|
|
676
|
+
<code>__YouTube Button|Icon:YouTube, YouTube__</code>
|
|
677
|
+
<br />
|
|
678
|
+
</div>
|
|
679
|
+
</div>
|
|
680
|
+
</div>
|
|
681
|
+
<!-- -->
|
|
682
|
+
<div class="ui basic segment">
|
|
683
|
+
<h4 id="size" class="ui header">Size</h4>
|
|
684
|
+
<p>A button can have different sizes</p>
|
|
685
|
+
</div>
|
|
686
|
+
<!-- -->
|
|
687
|
+
<div class="ui divided segment grid">
|
|
688
|
+
<div class="ui attached segment">
|
|
689
|
+
<div class="ui top attached label">Size</div>
|
|
690
|
+
</div>
|
|
691
|
+
<!-- -->
|
|
692
|
+
<div class="ui center aligned six wide column">
|
|
693
|
+
<h5 class="ui header">Preview</h5>
|
|
694
|
+
<button class="ui mini button">Mini</button>
|
|
695
|
+
<button class="ui tiny button">Tiny</button>
|
|
696
|
+
<button class="ui small button">Small</button>
|
|
697
|
+
<button class="ui medium button">Medium</button>
|
|
698
|
+
<button class="ui large button">Large</button>
|
|
699
|
+
<button class="ui big button">Big</button>
|
|
700
|
+
<button class="ui huge button">Huge</button>
|
|
701
|
+
<button class="ui massive button">Massive</button>
|
|
702
|
+
</div>
|
|
703
|
+
<!-- -->
|
|
704
|
+
<div class="ui left aligned ten wide column">
|
|
705
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
706
|
+
<div class="ui inverted very padded segment">
|
|
707
|
+
<code>__Mini Button|Mini__</code>
|
|
708
|
+
<br />
|
|
709
|
+
<code>__Tiny Button|Tiny__</code>
|
|
710
|
+
<br />
|
|
711
|
+
<code>__Small Button|Small__</code>
|
|
712
|
+
<br />
|
|
713
|
+
<code>__Medium Button|Medium__</code>
|
|
714
|
+
<br />
|
|
715
|
+
<code>__Large Button|Large__</code>
|
|
716
|
+
<br />
|
|
717
|
+
<code>__Big Button|Big__</code>
|
|
718
|
+
<br />
|
|
719
|
+
<code>__Huge Button|Huge__</code>
|
|
720
|
+
<br />
|
|
721
|
+
<code>__Massive Button|Massive__</code>
|
|
722
|
+
</div>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
<!-- -->
|
|
726
|
+
<div class="ui basic segment">
|
|
727
|
+
<h4 id="colored" class="ui header">Colored</h4>
|
|
728
|
+
<p>A button can have different colors</p>
|
|
729
|
+
</div>
|
|
730
|
+
<!-- -->
|
|
731
|
+
<div class="ui divided segment grid">
|
|
732
|
+
<div class="ui attached segment">
|
|
733
|
+
<div class="ui top attached label">Colored</div>
|
|
734
|
+
</div>
|
|
735
|
+
<!-- -->
|
|
736
|
+
<div class="ui center aligned six wide column">
|
|
737
|
+
<h5 class="ui header">Preview</h5>
|
|
738
|
+
<button class="ui red button">Red</button>
|
|
739
|
+
<button class="ui orange button">Orange</button>
|
|
740
|
+
<button class="ui yellow button">Yellow</button>
|
|
741
|
+
<button class="ui olive button">Olive</button>
|
|
742
|
+
<button class="ui green button">Green</button>
|
|
743
|
+
<button class="ui teal button">Teal</button>
|
|
744
|
+
<button class="ui blue button">Blue</button>
|
|
745
|
+
<button class="ui violet button">Violet</button>
|
|
746
|
+
<button class="ui purple button">Purple</button>
|
|
747
|
+
<button class="ui pink button">Pink</button>
|
|
748
|
+
<button class="ui brown button">Brown</button>
|
|
749
|
+
<button class="ui grey button">Grey</button>
|
|
750
|
+
<button class="ui black button">Black</button>
|
|
751
|
+
</div>
|
|
752
|
+
<!-- -->
|
|
753
|
+
<div class="ui left aligned ten wide column">
|
|
754
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
755
|
+
<div class="ui inverted very padded segment">
|
|
756
|
+
<code>__Red Button|Red__</code>
|
|
757
|
+
<br />
|
|
758
|
+
<code>__Orange Button|Orange__</code>
|
|
759
|
+
<br />
|
|
760
|
+
<code>__Yellow Button|Yellow__</code>
|
|
761
|
+
<br />
|
|
762
|
+
<code>__Olive Button|Olive__</code>
|
|
763
|
+
<br />
|
|
764
|
+
<code>__Green Button|Green__</code>
|
|
765
|
+
<br />
|
|
766
|
+
<code>__Teal Button|Teal__</code>
|
|
767
|
+
<br />
|
|
768
|
+
<code>__Blue Button|Blue__</code>
|
|
769
|
+
<br />
|
|
770
|
+
<code>__Violet Button|Violet__</code>
|
|
771
|
+
<br />
|
|
772
|
+
<code>__Purple Button|Purple__</code>
|
|
773
|
+
<br />
|
|
774
|
+
<code>__Pink Button|Pink__</code>
|
|
775
|
+
<br />
|
|
776
|
+
<code>__Brown Button|Brown__</code>
|
|
777
|
+
<br />
|
|
778
|
+
<code>__Grey Button|Grey__</code>
|
|
779
|
+
<br />
|
|
780
|
+
<code>__Black Button|Black__</code>
|
|
781
|
+
</div>
|
|
782
|
+
</div>
|
|
783
|
+
</div>
|
|
784
|
+
<!-- -->
|
|
785
|
+
<div class="ui basic segment">
|
|
786
|
+
<h4 id="compact" class="ui header">Compact</h4>
|
|
787
|
+
<p>A button can reduce its padding to fit into tighter spaces</p>
|
|
788
|
+
</div>
|
|
789
|
+
<!-- -->
|
|
790
|
+
<div class="ui divided segment grid">
|
|
791
|
+
<div class="ui attached segment">
|
|
792
|
+
<div class="ui top attached label">Compact</div>
|
|
793
|
+
</div>
|
|
794
|
+
<!-- -->
|
|
795
|
+
<div class="ui center aligned six wide column">
|
|
796
|
+
<h5 class="ui header">Preview</h5>
|
|
797
|
+
<button class="ui compact button">Hold</button>
|
|
798
|
+
<button class="ui compact icon button">
|
|
799
|
+
<i class="pause icon"></i>
|
|
800
|
+
</button>
|
|
801
|
+
<button class="ui compact labeled icon button"><i class="pause icon"></i>Pause</button>
|
|
802
|
+
</div>
|
|
803
|
+
<!-- -->
|
|
804
|
+
<div class="ui left aligned ten wide column">
|
|
805
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
806
|
+
<div class="ui inverted very padded segment">
|
|
807
|
+
<code>__Compact Button|Hold__</code>
|
|
808
|
+
<br />
|
|
809
|
+
<code>__Compact Icon Button|Icon:Pause__</code>
|
|
810
|
+
<br />
|
|
811
|
+
<code>__Compact Labeled Icon Button|Icon:Pause, Pause__</code>
|
|
812
|
+
</div>
|
|
813
|
+
</div>
|
|
814
|
+
</div>
|
|
815
|
+
<!-- -->
|
|
816
|
+
<div class="ui basic segment">
|
|
817
|
+
<h4 id="positive" class="ui header">Positive</h4>
|
|
818
|
+
<p>A button can hint towards a positive consequence</p>
|
|
819
|
+
</div>
|
|
820
|
+
<!-- -->
|
|
821
|
+
<div class="ui divided segment grid">
|
|
822
|
+
<div class="ui attached segment">
|
|
823
|
+
<div class="ui top attached label">Positive</div>
|
|
824
|
+
</div>
|
|
825
|
+
<!-- -->
|
|
826
|
+
<div class="ui center aligned six wide column">
|
|
827
|
+
<h5 class="ui header">Preview</h5>
|
|
828
|
+
<button class="ui positive button">Positive Button</button>
|
|
829
|
+
<button class="ui negative button">Negative Button</button>
|
|
830
|
+
</div>
|
|
831
|
+
<!-- -->
|
|
832
|
+
<div class="ui left aligned ten wide column">
|
|
833
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
834
|
+
<div class="ui inverted very padded segment">
|
|
835
|
+
<code>__Positive Button|Positive Button__</code>
|
|
836
|
+
<br />
|
|
837
|
+
<code>__Negative Button|Negative Button__</code>
|
|
838
|
+
<br />
|
|
839
|
+
</div>
|
|
840
|
+
</div>
|
|
841
|
+
</div>
|
|
842
|
+
<!-- -->
|
|
843
|
+
<div class="ui basic segment">
|
|
844
|
+
<h4 id="negative" class="ui header">Negative</h4>
|
|
845
|
+
<p>A button can hint towards a negative consequence</p>
|
|
846
|
+
</div>
|
|
847
|
+
<!-- -->
|
|
848
|
+
<div class="ui divided segment grid">
|
|
849
|
+
<div class="ui attached segment">
|
|
850
|
+
<div class="ui top attached label">Negative</div>
|
|
851
|
+
</div>
|
|
852
|
+
<!-- -->
|
|
853
|
+
<div class="ui center aligned six wide column">
|
|
854
|
+
<h5 class="ui header">Preview</h5>
|
|
855
|
+
<button class="ui negative button">Negative Button</button>
|
|
856
|
+
</div>
|
|
857
|
+
<!-- -->
|
|
858
|
+
<div class="ui left aligned ten wide column">
|
|
859
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
860
|
+
<div class="ui inverted very padded segment">
|
|
861
|
+
<code>__Negative Button|Negative Button__</code>
|
|
862
|
+
<br />
|
|
863
|
+
</div>
|
|
864
|
+
</div>
|
|
865
|
+
</div>
|
|
866
|
+
<!-- -->
|
|
867
|
+
<div class="ui basic segment">
|
|
868
|
+
<h4 id="fluid" class="ui header">Fluid</h4>
|
|
869
|
+
<p>A button can take the width of its container</p>
|
|
870
|
+
</div>
|
|
871
|
+
<!-- -->
|
|
872
|
+
<div class="ui divided segment grid">
|
|
873
|
+
<div class="ui attached segment">
|
|
874
|
+
<div class="ui top attached label">Fluid</div>
|
|
875
|
+
</div>
|
|
876
|
+
<!-- -->
|
|
877
|
+
<div class="ui center aligned six wide column">
|
|
878
|
+
<h5 class="ui header">Preview</h5>
|
|
879
|
+
<button class="ui fluid button">Fluid Button</button>
|
|
880
|
+
</div>
|
|
881
|
+
<!-- -->
|
|
882
|
+
<div class="ui left aligned ten wide column">
|
|
883
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
884
|
+
<div class="ui inverted very padded segment">
|
|
885
|
+
<code>__Fluid Button|Fluid Button__</code>
|
|
886
|
+
<br />
|
|
887
|
+
</div>
|
|
888
|
+
</div>
|
|
889
|
+
</div>
|
|
890
|
+
<!-- -->
|
|
891
|
+
<div class="ui basic segment">
|
|
892
|
+
<h4 id="circular" class="ui header">Circular</h4>
|
|
893
|
+
<p>A button can be circular</p>
|
|
894
|
+
</div>
|
|
895
|
+
<!-- -->
|
|
896
|
+
<div class="ui divided segment grid">
|
|
897
|
+
<div class="ui attached segment">
|
|
898
|
+
<div class="ui top attached label">Circular</div>
|
|
899
|
+
</div>
|
|
900
|
+
<!-- -->
|
|
901
|
+
<div class="ui center aligned six wide column">
|
|
902
|
+
<h5 class="ui header">Preview</h5>
|
|
903
|
+
<button class="ui circular icon button">
|
|
904
|
+
<i class="settings icon"></i>
|
|
905
|
+
</button>
|
|
906
|
+
</div>
|
|
907
|
+
<!-- -->
|
|
908
|
+
<div class="ui left aligned ten wide column">
|
|
909
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
910
|
+
<div class="ui inverted very padded segment">
|
|
911
|
+
<code>__Circular Icon Button|Icon:Settings__</code>
|
|
912
|
+
<br />
|
|
913
|
+
</div>
|
|
914
|
+
</div>
|
|
915
|
+
</div>
|
|
916
|
+
<!-- -->
|
|
917
|
+
<div class="ui basic segment">
|
|
918
|
+
<h4 id="vertically-attached" class="ui header">Vertically Attached</h4>
|
|
919
|
+
<p>A button can be attached to the top or bottom of other content</p>
|
|
920
|
+
</div>
|
|
921
|
+
<!-- -->
|
|
922
|
+
<div class="ui divided segment grid">
|
|
923
|
+
<div class="ui attached segment">
|
|
924
|
+
<div class="ui top attached label">Vertically Attached</div>
|
|
925
|
+
</div>
|
|
926
|
+
<!-- -->
|
|
927
|
+
<div class="ui center aligned six wide column">
|
|
928
|
+
<h5 class="ui header">Preview</h5>
|
|
929
|
+
<div class="ui top attached focusable button" tabindex="0">Top</div>
|
|
930
|
+
<div class="ui attached segment">
|
|
931
|
+
<p></p>
|
|
932
|
+
</div>
|
|
933
|
+
<div class="ui bottom attached focusable button" tabindex="0">Bottom</div>
|
|
934
|
+
</div>
|
|
935
|
+
<!-- -->
|
|
936
|
+
<div class="ui left aligned ten wide column">
|
|
937
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
938
|
+
<div class="ui inverted very padded segment">
|
|
939
|
+
<code>__Top Attached Focusable Button|Top__</code>
|
|
940
|
+
<br />
|
|
941
|
+
<code></code>
|
|
942
|
+
<br />
|
|
943
|
+
<code>> Attached Segment:</code>
|
|
944
|
+
<br />
|
|
945
|
+
<code>> " "</code>
|
|
946
|
+
<br />
|
|
947
|
+
<code></code>
|
|
948
|
+
<br />
|
|
949
|
+
<code>__Bottom Attached Focusable Button|Bottom__</code>
|
|
950
|
+
<br />
|
|
951
|
+
</div>
|
|
952
|
+
</div>
|
|
953
|
+
<!-- -->
|
|
954
|
+
<div class="ui center aligned six wide column">
|
|
955
|
+
<h5 class="ui header">Preview</h5>
|
|
956
|
+
<div class="ui two top attached buttons">
|
|
957
|
+
<button class="ui button">One</button>
|
|
958
|
+
<button class="ui button">Two</button>
|
|
959
|
+
</div>
|
|
960
|
+
<!-- -->
|
|
961
|
+
<div class="ui attached segment">
|
|
962
|
+
<p></p>
|
|
963
|
+
</div>
|
|
964
|
+
<!-- -->
|
|
965
|
+
<div class="ui two bottom attached buttons">
|
|
966
|
+
<button class="ui button">One</button>
|
|
967
|
+
<button class="ui button">Two</button>
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
<!-- -->
|
|
971
|
+
<div class="ui left aligned ten wide column">
|
|
972
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
973
|
+
<div class="ui inverted very padded segment">
|
|
974
|
+
<code>> Two Top Attached Buttons:</code>
|
|
975
|
+
<br />
|
|
976
|
+
<code>> __Button|One__</code>
|
|
977
|
+
<br />
|
|
978
|
+
<code>> __Button|Two__</code>
|
|
979
|
+
<br />
|
|
980
|
+
<code></code>
|
|
981
|
+
<br />
|
|
982
|
+
<code><!-- --></code>
|
|
983
|
+
<br />
|
|
984
|
+
<code></code>
|
|
985
|
+
<br />
|
|
986
|
+
<code>> Two Bottom Attached Buttons:</code>
|
|
987
|
+
<br />
|
|
988
|
+
<code>> __Button|One__</code>
|
|
989
|
+
<br />
|
|
990
|
+
<code>> __Button|Two__</code>
|
|
991
|
+
<br />
|
|
992
|
+
</div>
|
|
993
|
+
</div>
|
|
994
|
+
<!-- -->
|
|
995
|
+
</div>
|
|
996
|
+
<!-- -->
|
|
997
|
+
<div class="ui basic segment">
|
|
998
|
+
<h4 id="horizontally-attached" class="ui header">Horizontally Attached</h4>
|
|
999
|
+
<p>A button can be attached to the left or right of other content</p>
|
|
1000
|
+
</div>
|
|
1001
|
+
<!-- -->
|
|
1002
|
+
<div class="ui divided segment grid">
|
|
1003
|
+
<div class="ui attached segment">
|
|
1004
|
+
<div class="ui top attached label">Horizontally Attached</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
<!-- -->
|
|
1007
|
+
<div class="ui center aligned six wide column">
|
|
1008
|
+
<h5 class="ui header">Preview</h5>
|
|
1009
|
+
<div class="ui buttons">
|
|
1010
|
+
<button class="ui left attached button">Left</button>
|
|
1011
|
+
<button class="ui right attached button">Right</button>
|
|
1012
|
+
</div>
|
|
1013
|
+
</div>
|
|
1014
|
+
<!-- -->
|
|
1015
|
+
<div class="ui left aligned ten wide column">
|
|
1016
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1017
|
+
<div class="ui inverted very padded segment">
|
|
1018
|
+
<code>> Buttons:</code>
|
|
1019
|
+
<br />
|
|
1020
|
+
<code>> __Left Attached Button|Left__</code>
|
|
1021
|
+
<br />
|
|
1022
|
+
<code>> __Right Attached Button|Right__</code>
|
|
1023
|
+
</div>
|
|
1024
|
+
</div>
|
|
1025
|
+
</div>
|
|
1026
|
+
<!-- -->
|
|
1027
|
+
<div class="ui basic segment">
|
|
1028
|
+
<h2 id="group-variations" class="ui dividing left aligned header">Group Variations</h2>
|
|
1029
|
+
</div>
|
|
1030
|
+
<!-- -->
|
|
1031
|
+
<div class="ui basic segment">
|
|
1032
|
+
<h4 id="vertical-buttons" class="ui header">Vertical Buttons</h4>
|
|
1033
|
+
<p>Groups can be formatted to appear vertically</p>
|
|
1034
|
+
</div>
|
|
1035
|
+
<!-- -->
|
|
1036
|
+
<div class="ui divided segment grid">
|
|
1037
|
+
<div class="ui attached segment">
|
|
1038
|
+
<div class="ui top attached label">Vertical Buttons</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
<!-- -->
|
|
1041
|
+
<div class="ui center aligned six wide column">
|
|
1042
|
+
<h5 class="ui header">Preview</h5>
|
|
1043
|
+
<div class="ui vertical buttons">
|
|
1044
|
+
<button class="ui button">Feed</button>
|
|
1045
|
+
<button class="ui button">Messages</button>
|
|
1046
|
+
<button class="ui button">Events</button>
|
|
1047
|
+
<button class="ui button">Photos</button>
|
|
1048
|
+
</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
<!-- -->
|
|
1051
|
+
<div class="ui left aligned ten wide column">
|
|
1052
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1053
|
+
<div class="ui inverted very padded segment">
|
|
1054
|
+
<code>> Vertical Buttons:</code>
|
|
1055
|
+
<br />
|
|
1056
|
+
<code>> __Button|Feed__</code>
|
|
1057
|
+
<br />
|
|
1058
|
+
<code>> __Button|Messages__</code>
|
|
1059
|
+
<br />
|
|
1060
|
+
<code>> __Button|Events__</code>
|
|
1061
|
+
<br />
|
|
1062
|
+
<code>> __Button|Photos__</code>
|
|
1063
|
+
</div>
|
|
1064
|
+
</div>
|
|
1065
|
+
</div>
|
|
1066
|
+
<!-- -->
|
|
1067
|
+
<div class="ui basic segment">
|
|
1068
|
+
<h4 id="icon-buttons" class="ui header">Icon Buttons</h4>
|
|
1069
|
+
<p>Groups can be formatted as icons</p>
|
|
1070
|
+
</div>
|
|
1071
|
+
<!-- -->
|
|
1072
|
+
<div class="ui divided segment grid">
|
|
1073
|
+
<div class="ui attached segment">
|
|
1074
|
+
<div class="ui top attached label">Icon Buttons</div>
|
|
1075
|
+
</div>
|
|
1076
|
+
<!-- -->
|
|
1077
|
+
<div class="ui center aligned six wide column">
|
|
1078
|
+
<h5 class="ui header">Preview</h5>
|
|
1079
|
+
<div class="ui icon buttons">
|
|
1080
|
+
<button class="ui button">
|
|
1081
|
+
<i class="play icon"></i>
|
|
1082
|
+
</button>
|
|
1083
|
+
<button class="ui button">
|
|
1084
|
+
<i class="pause icon"></i>
|
|
1085
|
+
</button>
|
|
1086
|
+
<button class="ui button">
|
|
1087
|
+
<i class="shuffle icon"></i>
|
|
1088
|
+
</button>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
<!-- -->
|
|
1092
|
+
<div class="ui left aligned ten wide column">
|
|
1093
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1094
|
+
<div class="ui inverted very padded segment">
|
|
1095
|
+
<code>> Icon Buttons:</code>
|
|
1096
|
+
<br />
|
|
1097
|
+
<code>> __Button|Icon:Play__</code>
|
|
1098
|
+
<br />
|
|
1099
|
+
<code>> __Button|Icon:Pause__</code>
|
|
1100
|
+
<br />
|
|
1101
|
+
<code>> __Button|Icon:Shuffle__</code>
|
|
1102
|
+
</div>
|
|
1103
|
+
</div>
|
|
1104
|
+
</div>
|
|
1105
|
+
<!-- -->
|
|
1106
|
+
<div class="ui basic segment">
|
|
1107
|
+
<h4 id="labeled-icon-buttons" class="ui header">Labeled Icon Buttons</h4>
|
|
1108
|
+
<p>Groups can be formatted as labeled icons</p>
|
|
1109
|
+
</div>
|
|
1110
|
+
<!-- -->
|
|
1111
|
+
<div class="ui divided segment grid">
|
|
1112
|
+
<div class="ui attached segment">
|
|
1113
|
+
<div class="ui top attached label">Labeled Icon Buttons</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
<!-- -->
|
|
1116
|
+
<div class="ui center aligned six wide column">
|
|
1117
|
+
<h5 class="ui header">Preview</h5>
|
|
1118
|
+
<div class="ui vertical labeled icon buttons">
|
|
1119
|
+
<button class="ui button"><i class="play icon"></i>Play</button>
|
|
1120
|
+
<button class="ui button"><i class="pause icon"></i>Pause</button>
|
|
1121
|
+
<button class="ui button"><i class="shuffle icon"></i>Shuffle</button>
|
|
1122
|
+
</div>
|
|
1123
|
+
</div>
|
|
1124
|
+
<!-- -->
|
|
1125
|
+
<div class="ui left aligned ten wide column">
|
|
1126
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1127
|
+
<div class="ui inverted very padded segment">
|
|
1128
|
+
<code>> Vertical Labeled Icon Buttons:</code>
|
|
1129
|
+
<br />
|
|
1130
|
+
<code>> __Button|Icon:Play, Play__</code>
|
|
1131
|
+
<br />
|
|
1132
|
+
<code>> __Button|Icon:Pause, Pause__</code>
|
|
1133
|
+
<br />
|
|
1134
|
+
<code>> __Button|Icon:Shuffle, Shuffle__</code>
|
|
1135
|
+
</div>
|
|
1136
|
+
</div>
|
|
1137
|
+
</div>
|
|
1138
|
+
<!-- -->
|
|
1139
|
+
<div class="ui basic segment">
|
|
1140
|
+
<h4 id="mixed-group" class="ui header">Mixed Group</h4>
|
|
1141
|
+
<p>Groups can be formatted to use multiple button types together</p>
|
|
1142
|
+
</div>
|
|
1143
|
+
<!-- -->
|
|
1144
|
+
<div class="ui divided segment grid">
|
|
1145
|
+
<div class="ui attached segment">
|
|
1146
|
+
<div class="ui top attached label">Mixed Group</div>
|
|
1147
|
+
</div>
|
|
1148
|
+
<!-- -->
|
|
1149
|
+
<div class="ui center aligned six wide column">
|
|
1150
|
+
<h5 class="ui header">Preview</h5>
|
|
1151
|
+
<div class="ui buttons">
|
|
1152
|
+
<button class="ui labeled icon button"><i class="left chevron icon"></i>Back</button>
|
|
1153
|
+
<button class="ui button"><i class="stop icon"></i>Stop</button>
|
|
1154
|
+
<button class="ui right labeled icon button"><i class="right chevron icon"></i>Forward</button>
|
|
1155
|
+
</div>
|
|
1156
|
+
</div>
|
|
1157
|
+
<!-- -->
|
|
1158
|
+
<div class="ui left aligned ten wide column">
|
|
1159
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1160
|
+
<div class="ui inverted very padded segment">
|
|
1161
|
+
<code>> Buttons:</code>
|
|
1162
|
+
<br />
|
|
1163
|
+
<code>> __Labeled Icon Button|Icon:Left Chevron, Back__</code>
|
|
1164
|
+
<br />
|
|
1165
|
+
<code>> __Button|Icon:Stop, Stop__</code>
|
|
1166
|
+
<br />
|
|
1167
|
+
<code>> __Right Labeled Icon Button|Icon:Right Chevron, Forward__</code>
|
|
589
1168
|
</div>
|
|
590
1169
|
</div>
|
|
591
1170
|
</div>
|