markdown-ui 0.1.6 → 0.1.7
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 +6 -0
- data/README.md +1 -1
- data/exe/markdown-ui +10 -12
- data/lib/markdown-ui.rb +1 -7
- data/lib/markdown-ui/version.rb +1 -1
- data/markdown-ui.gemspec +6 -6
- data/website/button.html +524 -0
- data/website/button.md +535 -0
- data/website/compile.sh +8 -4
- data/website/index.html +498 -546
- data/website/index.md +598 -582
- metadata +10 -2
data/website/compile.sh
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
#!/usr/bin/env bash
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
for i in *.md; do
|
|
4
|
+
name="$(basename $i .md)"
|
|
5
|
+
../exe/markdown-ui $name.md > $name.html
|
|
6
|
+
|
|
7
|
+
rpl "#home" "http://jjuliano.github.io/markdown-ui" $name.html
|
|
8
|
+
rpl "#github" "https://github.com/jjuliano/markdown-ui" $name.html
|
|
9
|
+
rpl "：" ":" $name.html
|
|
10
|
+
done
|
data/website/index.html
CHANGED
|
@@ -1,696 +1,648 @@
|
|
|
1
|
-
<!
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
13
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.min.js"></script>
|
|
14
|
-
|
|
15
|
-
<!--[if lt IE 9]>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
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
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" />
|
|
9
|
+
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
10
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js"></script>
|
|
11
|
+
<!--[if lt IE 9]>
|
|
16
12
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
17
13
|
<![endif]-->
|
|
18
|
-
|
|
14
|
+
<style>
|
|
15
|
+
<![CDATA[
|
|
19
16
|
code { white-space:pre }
|
|
20
|
-
|
|
21
|
-
</
|
|
22
|
-
|
|
23
|
-
<body>
|
|
24
|
-
<div class="ui center aligned container">
|
|
17
|
+
]]>
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
25
21
|
<div class="ui inverted segment container">
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</div>
|
|
22
|
+
<div class="ui inverted menu">
|
|
23
|
+
<a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
|
|
24
|
+
<div class="ui inverted right menu">
|
|
25
|
+
<a class="ui disabled item" href="#docs">Docs</a>
|
|
26
|
+
<a class="ui disabled item" href="#about">About</a>
|
|
27
|
+
<a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
|
|
28
|
+
<a class="ui disabled item" href="#install">Install</a>
|
|
34
29
|
</div>
|
|
35
30
|
</div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
36
33
|
<!-- -->
|
|
37
|
-
|
|
34
|
+
<div class="ui left aligned container">
|
|
38
35
|
<!-- -->
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
<div class="ui inverted attached teal very padded segment">
|
|
37
|
+
<h1 class="ui header">Markdown UI</h1>
|
|
38
|
+
<h3 class="ui header">Responsive UI in Markdown</h3>
|
|
39
|
+
</div>
|
|
43
40
|
<!-- -->
|
|
44
|
-
|
|
41
|
+
<div class="ui attached segment">
|
|
45
42
|
<!-- -->
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
<div class="ui equal width grid">
|
|
44
|
+
<div class="ui column"><h2 class="ui header">Installation</h2><code>gem install markdown-ui</code><h2 class="ui header">Usage</h2><code>markdown-ui index.mdui > index.html</code><h2 class="ui header">Credits</h2>
|
|
48
45
|
Markdown-UI uses <a class="ui item" href="http://www.semantic-ui.com">Semantic-UI http://www.semantic-ui.com</a>
|
|
49
46
|
syntax and framework, and ruby <code>redcarpet</code> library.
|
|
50
47
|
Credit goes to the people behind these wonderful framework and libraries.<h2 class="ui header">Issues/Bugs</h2>
|
|
51
|
-
<ul class="ui list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>Code is not DRY, needs refactoring.</li><li>Implimentation is subject to change</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li></ul></div>
|
|
52
|
-
<!-- -->
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<br />
|
|
63
|
-
<code>> > Right Menu:</code>
|
|
64
|
-
<br />
|
|
65
|
-
<code>> > [Logout](#logout)</code>
|
|
66
|
-
<br />
|
|
67
|
-
<br />
|
|
68
|
-
<code>__Button|Add Friend__</code>
|
|
69
|
-
</div>
|
|
48
|
+
<ul class="ui unordered list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>Code is not DRY, needs refactoring.</li><li>Implimentation is subject to change</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li></ul></div>
|
|
49
|
+
<!-- -->
|
|
50
|
+
<div class="ui column">
|
|
51
|
+
<div class="ui inverted very padded segment">
|
|
52
|
+
<code>> Pointing Menu:</code>
|
|
53
|
+
<br /><code>> [Home](#root "active")</code>
|
|
54
|
+
<br /><code>> [Messages](#messages)</code>
|
|
55
|
+
<br /><code>> [Friends](#friends)</code>
|
|
56
|
+
<br /><code>> > Right Menu:</code>
|
|
57
|
+
<br /><code>> > [Logout](#logout)</code>
|
|
58
|
+
<br /><br /><code>__Button|Add Friend__</code>
|
|
70
59
|
</div>
|
|
71
60
|
</div>
|
|
72
61
|
</div>
|
|
62
|
+
</div>
|
|
73
63
|
<!-- -->
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</
|
|
82
|
-
<!-- -->
|
|
83
|
-
<h5 class="ui header">Container</h5>
|
|
84
|
-
<div class="ui info message">
|
|
85
|
-
<code>> Container:</code>
|
|
86
|
-
<br />
|
|
87
|
-
<code>></code>
|
|
88
|
-
<br />
|
|
89
|
-
</div>
|
|
90
|
-
<!-- -->
|
|
91
|
-
<h5 class="ui header">Icon</h5>
|
|
92
|
-
<div class="ui info message">
|
|
93
|
-
<code>_Icon <Name>_</code>
|
|
94
|
-
<br />
|
|
95
|
-
</div>
|
|
96
|
-
<!-- -->
|
|
97
|
-
<h5 class="ui header">Segment</h5>
|
|
98
|
-
<div class="ui info message">
|
|
99
|
-
<code>> Segment:</code>
|
|
100
|
-
<br />
|
|
101
|
-
<code>></code>
|
|
102
|
-
<br />
|
|
103
|
-
</div>
|
|
104
|
-
<!-- -->
|
|
105
|
-
<h5 class="ui header">Menu</h5>
|
|
106
|
-
<div class="ui info message">
|
|
107
|
-
<code>> Menu:</code>
|
|
108
|
-
<br />
|
|
109
|
-
<code>> [Menu Item]</code>
|
|
110
|
-
<br />
|
|
111
|
-
</div>
|
|
112
|
-
<!-- -->
|
|
113
|
-
<h5 class="ui header">List</h5>
|
|
114
|
-
<div class="ui info message">
|
|
115
|
-
<code>* List 1</code>
|
|
116
|
-
<br />
|
|
117
|
-
<code>* List 2</code>
|
|
118
|
-
<br />
|
|
119
|
-
</div>
|
|
120
|
-
<!-- -->
|
|
121
|
-
<h5 class="ui header">Label</h5>
|
|
122
|
-
<div class="ui info message">
|
|
123
|
-
<code>> Label:</code>
|
|
124
|
-
<br />
|
|
125
|
-
<code>> _Mail Icon_ 23</code>
|
|
126
|
-
<br />
|
|
127
|
-
</div>
|
|
128
|
-
<!-- -->
|
|
64
|
+
<h2 class="ui center aligned header">Cheat Sheet</h2>
|
|
65
|
+
<div class="ui equal width grid">
|
|
66
|
+
<div class="ui column">
|
|
67
|
+
<div class="ui basic segment">
|
|
68
|
+
<h5 class="ui header">Button</h5>
|
|
69
|
+
<div class="ui info message">
|
|
70
|
+
<code># Short-Hand</code>
|
|
71
|
+
<br /><code>__Button|Button Text__</code>
|
|
129
72
|
</div>
|
|
130
|
-
</div>
|
|
131
73
|
<!-- -->
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<
|
|
141
|
-
<
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<
|
|
147
|
-
<div
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<
|
|
153
|
-
<div
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<code>> > Column:</code>
|
|
173
|
-
<br />
|
|
174
|
-
<code>> > Column 2</code>
|
|
175
|
-
<br />
|
|
176
|
-
</div>
|
|
74
|
+
<div class="ui info message">
|
|
75
|
+
<code># Block Syntax</code>
|
|
76
|
+
<br /><code>> Button:</code>
|
|
77
|
+
<br /><code>> Button Text</code>
|
|
78
|
+
<br /></div>
|
|
79
|
+
<!-- -->
|
|
80
|
+
<h5 class="ui header">Container</h5>
|
|
81
|
+
<div class="ui info message">
|
|
82
|
+
<code>> Container:</code>
|
|
83
|
+
<br /><code>></code>
|
|
84
|
+
<br /></div>
|
|
85
|
+
<!-- -->
|
|
86
|
+
<h5 class="ui header">Icon</h5>
|
|
87
|
+
<div class="ui info message">
|
|
88
|
+
<code>_Icon <Name>_</code>
|
|
89
|
+
<br /></div>
|
|
90
|
+
<!-- -->
|
|
91
|
+
<h5 class="ui header">Segment</h5>
|
|
92
|
+
<div class="ui info message">
|
|
93
|
+
<code>> Segment:</code>
|
|
94
|
+
<br /><code>></code>
|
|
95
|
+
<br /></div>
|
|
96
|
+
<!-- -->
|
|
97
|
+
<h5 class="ui header">Menu</h5>
|
|
98
|
+
<div class="ui info message">
|
|
99
|
+
<code>> Menu:</code>
|
|
100
|
+
<br /><code>> [Menu Item]</code>
|
|
101
|
+
<br /></div>
|
|
102
|
+
<!-- -->
|
|
103
|
+
<h5 class="ui header">List</h5>
|
|
104
|
+
<div class="ui info message">
|
|
105
|
+
<code>* List 1</code>
|
|
106
|
+
<br /><code>* List 2</code>
|
|
107
|
+
<br /></div>
|
|
108
|
+
<!-- -->
|
|
109
|
+
<h5 class="ui header">Label</h5>
|
|
110
|
+
<div class="ui info message">
|
|
111
|
+
<code>> Label:</code>
|
|
112
|
+
<br /><code>> _Mail Icon_ 23</code>
|
|
113
|
+
<br /></div>
|
|
177
114
|
<!-- -->
|
|
178
|
-
</div>
|
|
179
115
|
</div>
|
|
180
116
|
</div>
|
|
181
117
|
<!-- -->
|
|
182
|
-
<div class="ui
|
|
183
|
-
<
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
118
|
+
<div class="ui column">
|
|
119
|
+
<div class="ui basic segment">
|
|
120
|
+
<h5 class="ui header">Item</h5>
|
|
121
|
+
<div class="ui info message">
|
|
122
|
+
<code>[Item](#URL_ID "class")</code>
|
|
123
|
+
<br /></div>
|
|
124
|
+
<!-- -->
|
|
125
|
+
<h5 class="ui header">Message</h5>
|
|
126
|
+
<div class="ui info message">
|
|
127
|
+
<code># Short-Hand</code>
|
|
128
|
+
<br /><code>__Message|Header:Message Header,Text:Message Text__</code>
|
|
129
|
+
<br /></div>
|
|
130
|
+
<!-- -->
|
|
131
|
+
<div class="ui info message">
|
|
132
|
+
<code># Block Syntax</code>
|
|
133
|
+
<br /><code>> Message:</code>
|
|
134
|
+
<br /><code>> __Header|Message Header__</code>
|
|
135
|
+
<br /><code>> Message Text</code>
|
|
136
|
+
<br /></div>
|
|
137
|
+
<!-- -->
|
|
138
|
+
<h5 class="ui header">Header</h5>
|
|
139
|
+
<div class="ui info message">
|
|
140
|
+
<code># H1, ## H2, ### H3, #### H4 ...</code>
|
|
141
|
+
<br /></div>
|
|
142
|
+
<!-- -->
|
|
143
|
+
<div class="ui info message">
|
|
144
|
+
<code># DIV tag header</code>
|
|
145
|
+
<br /><code>__Header|A Div Header__</code>
|
|
146
|
+
<br /></div>
|
|
147
|
+
<!-- -->
|
|
148
|
+
<h5 class="ui header">Column / Grid / Row / Segment / Container</h5>
|
|
149
|
+
<div class="ui info message">
|
|
150
|
+
<code>> Grid:</code>
|
|
151
|
+
<br /><code>></code>
|
|
152
|
+
<br /><code>> <!-- --></code>
|
|
153
|
+
<br /><code>></code>
|
|
154
|
+
<br /><code>> > Column:</code>
|
|
155
|
+
<br /><code>> > Column 1</code>
|
|
156
|
+
<br /><code>></code>
|
|
157
|
+
<br /><code>> <!-- --></code>
|
|
158
|
+
<br /><code>></code>
|
|
159
|
+
<br /><code>> > Column:</code>
|
|
160
|
+
<br /><code>> > Column 2</code>
|
|
161
|
+
<br /></div>
|
|
190
162
|
<!-- -->
|
|
191
|
-
<div class="ui divided segment grid">
|
|
192
|
-
<div class="ui html top attached segment">
|
|
193
|
-
<div class="ui top attached label">Standard Button</div>
|
|
194
163
|
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
195
166
|
<!-- -->
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
</div>
|
|
167
|
+
<div class="ui segment">
|
|
168
|
+
<h1 class="ui center aligned header">Buttons</h1>
|
|
169
|
+
</div>
|
|
200
170
|
<!-- -->
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
__Button|Follow__
|
|
206
|
-
</code>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
171
|
+
<div class="ui segment">
|
|
172
|
+
<h3 class="ui header">Button</h3>
|
|
173
|
+
<p>Standard Button</p>
|
|
174
|
+
</div>
|
|
209
175
|
<!-- -->
|
|
176
|
+
<div class="ui divided segment grid">
|
|
177
|
+
<div class="ui html top attached segment">
|
|
178
|
+
<div class="ui top attached label">Standard Button</div>
|
|
210
179
|
</div>
|
|
211
180
|
<!-- -->
|
|
212
|
-
<div class="ui
|
|
213
|
-
<
|
|
214
|
-
|
|
215
|
-
|
|
181
|
+
<div class="ui center aligned six wide column">
|
|
182
|
+
<h5 class="ui header">Preview</h5>
|
|
183
|
+
<div class="ui button">Follow</div>
|
|
184
|
+
</div>
|
|
216
185
|
<!-- -->
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
186
|
+
<div class="ui left aligned ten wide column">
|
|
187
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
188
|
+
<div class="ui inverted very padded segment">
|
|
189
|
+
<code>
|
|
190
|
+
__Button|Follow__
|
|
191
|
+
</code>
|
|
220
192
|
</div>
|
|
193
|
+
</div>
|
|
221
194
|
<!-- -->
|
|
222
|
-
|
|
223
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
224
|
-
<div class="ui inverted very padded segment">
|
|
225
|
-
<code>__Follow-Button-Class Button|Follow|Follow-Button-ID__</code>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
195
|
+
</div>
|
|
228
196
|
<!-- -->
|
|
197
|
+
<div class="ui divided segment grid">
|
|
198
|
+
<div class="ui html top attached segment">
|
|
199
|
+
<div class="ui top attached label">Standard Button with Custom Class And ID</div>
|
|
229
200
|
</div>
|
|
230
201
|
<!-- -->
|
|
231
|
-
<div class="ui
|
|
232
|
-
<
|
|
233
|
-
|
|
234
|
-
|
|
202
|
+
<div class="ui center aligned six wide column">
|
|
203
|
+
<h5 class="ui header">Preview</h5>
|
|
204
|
+
<div id="optional-id" class="ui optional-class button">Follow</div>
|
|
205
|
+
</div>
|
|
235
206
|
<!-- -->
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
207
|
+
<div class="ui left aligned ten wide column">
|
|
208
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
209
|
+
<div class="ui inverted very padded segment">
|
|
210
|
+
<code>__<Optional-Class> Button|Follow|<Optional-ID>__</code>
|
|
239
211
|
</div>
|
|
212
|
+
</div>
|
|
240
213
|
<!-- -->
|
|
241
|
-
|
|
242
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
243
|
-
<div class="ui inverted very padded segment">
|
|
244
|
-
<code>
|
|
245
|
-
__Focusable Button|Follow|My-Focusable-Button__
|
|
246
|
-
</code>
|
|
247
|
-
</div>
|
|
248
|
-
</div>
|
|
214
|
+
</div>
|
|
249
215
|
<!-- -->
|
|
216
|
+
<div class="ui divided segment grid">
|
|
217
|
+
<div class="ui html top attached segment">
|
|
218
|
+
<div class="ui top attached label">Focusable Button</div>
|
|
250
219
|
</div>
|
|
251
220
|
<!-- -->
|
|
252
|
-
<div class="ui
|
|
253
|
-
<
|
|
254
|
-
<
|
|
221
|
+
<div class="ui center aligned six wide column">
|
|
222
|
+
<h5 class="ui header">Preview</h5>
|
|
223
|
+
<button id="optional-id" class="ui focusable button">Follow</button>
|
|
255
224
|
</div>
|
|
256
225
|
<!-- -->
|
|
257
|
-
<div class="ui
|
|
258
|
-
<
|
|
259
|
-
|
|
226
|
+
<div class="ui left aligned ten wide column">
|
|
227
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
228
|
+
<div class="ui inverted very padded segment">
|
|
229
|
+
<code>
|
|
230
|
+
__Focusable Button|Follow|<Optional-ID>__
|
|
231
|
+
</code>
|
|
260
232
|
</div>
|
|
233
|
+
</div>
|
|
261
234
|
<!-- -->
|
|
262
|
-
|
|
263
|
-
<h5 class="ui header">Preview</h5>
|
|
264
|
-
<div class="ui primary button">Save</div>
|
|
265
|
-
<div class="ui button">Discard</div>
|
|
266
|
-
<p></p>
|
|
267
|
-
<div class="ui secondary button">Save</div>
|
|
268
|
-
<div class="ui button">Discard</div>
|
|
269
|
-
</div>
|
|
235
|
+
</div>
|
|
270
236
|
<!-- -->
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
__Primary Button|Save__
|
|
276
|
-
__Button|Discard__
|
|
277
|
-
__Secondary Button|Save__
|
|
278
|
-
__Button|Discard__
|
|
279
|
-
</code>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
237
|
+
<div class="ui attached segment">
|
|
238
|
+
<h3 class="ui header">Emphasis</h3>
|
|
239
|
+
<p>A button can be formatted to show different levels of emphasis</p>
|
|
240
|
+
</div>
|
|
282
241
|
<!-- -->
|
|
242
|
+
<div class="ui divided segment grid">
|
|
243
|
+
<div class="ui html top attached segment">
|
|
244
|
+
<div class="ui top attached label">Emphasis</div>
|
|
283
245
|
</div>
|
|
284
246
|
<!-- -->
|
|
285
|
-
<div class="ui
|
|
286
|
-
<
|
|
287
|
-
<
|
|
247
|
+
<div class="ui center aligned six wide column">
|
|
248
|
+
<h5 class="ui header">Preview</h5>
|
|
249
|
+
<div class="ui primary button">Save</div>
|
|
250
|
+
<div class="ui button">Discard</div>
|
|
251
|
+
<p></p>
|
|
252
|
+
<div class="ui secondary button">Save</div>
|
|
253
|
+
<div class="ui button">Discard</div>
|
|
288
254
|
</div>
|
|
289
255
|
<!-- -->
|
|
290
|
-
<div class="ui
|
|
291
|
-
<
|
|
292
|
-
|
|
256
|
+
<div class="ui left aligned ten wide column">
|
|
257
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
258
|
+
<div class="ui inverted very padded segment">
|
|
259
|
+
<code>__Primary Button|Save__ __Button|Discard__</code>
|
|
260
|
+
<br /><code>__Secondary Button|Save__ __Button|Discard__</code>
|
|
293
261
|
</div>
|
|
262
|
+
</div>
|
|
263
|
+
<!-- -->
|
|
264
|
+
</div>
|
|
265
|
+
<!-- -->
|
|
266
|
+
<div class="ui attached segment">
|
|
267
|
+
<h3 class="ui header">Animated</h3>
|
|
268
|
+
<p>A button can animate to show hidden content</p>
|
|
269
|
+
</div>
|
|
270
|
+
<!-- -->
|
|
271
|
+
<div class="ui divided segment grid">
|
|
272
|
+
<div class="ui html top attached segment">
|
|
273
|
+
<div class="ui top attached label">Animated</div>
|
|
274
|
+
</div>
|
|
294
275
|
<!-- -->
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
</div>
|
|
276
|
+
<div class="ui center aligned six wide column">
|
|
277
|
+
<h5 class="ui header">Preview</h5>
|
|
278
|
+
<div class="ui animated button">
|
|
279
|
+
<div class="visible content">Next</div>
|
|
280
|
+
<div class="hidden content">
|
|
281
|
+
<i class="right arrow icon"></i>
|
|
302
282
|
</div>
|
|
303
283
|
</div>
|
|
284
|
+
</div>
|
|
304
285
|
<!-- -->
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
286
|
+
<div class="ui left aligned ten wide column">
|
|
287
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
288
|
+
<div class="ui inverted very padded segment">
|
|
289
|
+
<code>
|
|
309
290
|
__Animated Button|Next;Icon:Right Arrow__
|
|
310
291
|
</code>
|
|
311
|
-
</div>
|
|
312
292
|
</div>
|
|
313
|
-
<!-- -->
|
|
314
293
|
</div>
|
|
315
294
|
<!-- -->
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
295
|
+
</div>
|
|
296
|
+
<!-- -->
|
|
297
|
+
<div class="ui divided segment grid">
|
|
298
|
+
<div class="ui html top attached segment">
|
|
299
|
+
<div class="ui top attached label">Vertical Animated</div>
|
|
300
|
+
</div>
|
|
320
301
|
<!-- -->
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
</div>
|
|
327
|
-
<div class="hidden content">Shop</div>
|
|
302
|
+
<div class="ui center aligned six wide column">
|
|
303
|
+
<h5 class="ui header">Preview</h5>
|
|
304
|
+
<div class="ui vertical animated button">
|
|
305
|
+
<div class="visible content">
|
|
306
|
+
<i class="shop icon"></i>
|
|
328
307
|
</div>
|
|
308
|
+
<div class="hidden content">Shop</div>
|
|
329
309
|
</div>
|
|
310
|
+
</div>
|
|
330
311
|
<!-- -->
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
312
|
+
<div class="ui left aligned ten wide column">
|
|
313
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
314
|
+
<div class="ui inverted very padded segment">
|
|
315
|
+
<code>
|
|
335
316
|
__Vertical Animated Button|Icon:Shop;Shop__
|
|
336
317
|
</code>
|
|
337
|
-
</div>
|
|
338
318
|
</div>
|
|
319
|
+
</div>
|
|
320
|
+
<!-- -->
|
|
321
|
+
</div>
|
|
339
322
|
<!-- -->
|
|
323
|
+
<div class="ui divided segment grid">
|
|
324
|
+
<div class="ui html top attached segment">
|
|
325
|
+
<div class="ui top attached label">Fade Animated</div>
|
|
340
326
|
</div>
|
|
341
327
|
<!-- -->
|
|
342
|
-
<div class="ui
|
|
343
|
-
<
|
|
344
|
-
|
|
328
|
+
<div class="ui center aligned six wide column">
|
|
329
|
+
<h5 class="ui header">Preview</h5>
|
|
330
|
+
<div class="ui fade animated button">
|
|
331
|
+
<div class="visible content">Sign-up for a Pro account</div>
|
|
332
|
+
<div class="hidden content">$12.99 a month</div>
|
|
345
333
|
</div>
|
|
334
|
+
</div>
|
|
346
335
|
<!-- -->
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
<div class="hidden content">$12.99 a month</div>
|
|
352
|
-
</div>
|
|
336
|
+
<div class="ui left aligned ten wide column">
|
|
337
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
338
|
+
<div class="ui inverted very padded segment">
|
|
339
|
+
<code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code>
|
|
353
340
|
</div>
|
|
341
|
+
</div>
|
|
354
342
|
<!-- -->
|
|
355
|
-
|
|
356
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
357
|
-
<div class="ui inverted very padded segment"><code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code><br /> or <br />
|
|
358
|
-
<code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code></div>
|
|
359
|
-
</div>
|
|
343
|
+
</div>
|
|
360
344
|
<!-- -->
|
|
361
|
-
|
|
345
|
+
<div class="ui attached segment">
|
|
346
|
+
<h3 class="ui header">Icon</h3>
|
|
347
|
+
<p>A button can have only an icon</p>
|
|
348
|
+
</div>
|
|
362
349
|
<!-- -->
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
<
|
|
350
|
+
<div class="ui divided segment grid">
|
|
351
|
+
<div class="ui html top attached segment">
|
|
352
|
+
<div class="ui top attached label">Icon Button</div>
|
|
366
353
|
</div>
|
|
367
354
|
<!-- -->
|
|
368
|
-
<div class="ui
|
|
369
|
-
<
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
<!-- -->
|
|
373
|
-
<div class="ui center aligned six wide column">
|
|
374
|
-
<h5 class="ui header">Preview</h5>
|
|
375
|
-
<div class="ui icon button">
|
|
376
|
-
<i class="cloud icon"></i>
|
|
377
|
-
</div>
|
|
355
|
+
<div class="ui center aligned six wide column">
|
|
356
|
+
<h5 class="ui header">Preview</h5>
|
|
357
|
+
<div class="ui icon button">
|
|
358
|
+
<i class="cloud icon"></i>
|
|
378
359
|
</div>
|
|
360
|
+
</div>
|
|
379
361
|
<!-- -->
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
362
|
+
<div class="ui left aligned ten wide column">
|
|
363
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
364
|
+
<div class="ui inverted very padded segment">
|
|
365
|
+
<code>
|
|
384
366
|
__Icon Button|Icon:Cloud__
|
|
385
367
|
</code>
|
|
386
|
-
</div>
|
|
387
368
|
</div>
|
|
388
|
-
<!-- -->
|
|
389
369
|
</div>
|
|
390
370
|
<!-- -->
|
|
391
|
-
|
|
392
|
-
<h3 class="ui header">Labeled Icon</h3>
|
|
393
|
-
<p>A button can have an icon and a label</p>
|
|
394
|
-
</div>
|
|
371
|
+
</div>
|
|
395
372
|
<!-- -->
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
373
|
+
<div class="ui attached segment">
|
|
374
|
+
<h3 class="ui header">Labeled Icon</h3>
|
|
375
|
+
<p>A button can have an icon and a label</p>
|
|
376
|
+
</div>
|
|
400
377
|
<!-- -->
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
378
|
+
<div class="ui divided segment grid">
|
|
379
|
+
<div class="ui html top attached segment">
|
|
380
|
+
<div class="ui top attached label">Labeled Icon</div>
|
|
381
|
+
</div>
|
|
405
382
|
<!-- -->
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
383
|
+
<div class="ui center aligned six wide column">
|
|
384
|
+
<h5 class="ui header">Preview</h5>
|
|
385
|
+
<div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
|
|
386
|
+
</div>
|
|
387
|
+
<!-- -->
|
|
388
|
+
<div class="ui left aligned ten wide column">
|
|
389
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
390
|
+
<div class="ui inverted very padded segment">
|
|
391
|
+
<code>
|
|
410
392
|
__Labeled Icon Button|Icon:Pause,Pause__
|
|
411
393
|
</code>
|
|
412
|
-
</div>
|
|
413
394
|
</div>
|
|
414
|
-
<!-- -->
|
|
415
395
|
</div>
|
|
416
396
|
<!-- -->
|
|
417
|
-
|
|
418
|
-
<h3 class="ui header">Basic Button</h3>
|
|
419
|
-
<p>A basic button is less pronounced</p>
|
|
420
|
-
</div>
|
|
397
|
+
</div>
|
|
421
398
|
<!-- -->
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
399
|
+
<div class="ui attached segment">
|
|
400
|
+
<h3 class="ui header">Basic Button</h3>
|
|
401
|
+
<p>A basic button is less pronounced</p>
|
|
402
|
+
</div>
|
|
426
403
|
<!-- -->
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
404
|
+
<div class="ui divided segment grid">
|
|
405
|
+
<div class="ui html top attached segment">
|
|
406
|
+
<div class="ui top attached label">Basic Button</div>
|
|
407
|
+
</div>
|
|
431
408
|
<!-- -->
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
409
|
+
<div class="ui center aligned six wide column">
|
|
410
|
+
<h5 class="ui header">Preview</h5>
|
|
411
|
+
<div class="ui basic button"><i class="user icon"></i>Add Friend</div>
|
|
412
|
+
</div>
|
|
413
|
+
<!-- -->
|
|
414
|
+
<div class="ui left aligned ten wide column">
|
|
415
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
416
|
+
<div class="ui inverted very padded segment">
|
|
417
|
+
<code>
|
|
436
418
|
__Basic Button|Icon:User,Add Friend__
|
|
437
419
|
</code>
|
|
438
|
-
</div>
|
|
439
420
|
</div>
|
|
421
|
+
</div>
|
|
422
|
+
<!-- -->
|
|
423
|
+
</div>
|
|
440
424
|
<!-- -->
|
|
425
|
+
<div class="ui divided segment grid">
|
|
426
|
+
<div class="ui html top attached segment">
|
|
427
|
+
<div class="ui top attached label">Basic Button</div>
|
|
441
428
|
</div>
|
|
442
429
|
<!-- -->
|
|
443
|
-
<div class="ui
|
|
444
|
-
<
|
|
445
|
-
|
|
446
|
-
</div>
|
|
430
|
+
<div class="ui center aligned six wide column">
|
|
431
|
+
<h5 class="ui header">Preview</h5>
|
|
432
|
+
<div class="ui basic standard button">Standard</div>
|
|
433
|
+
<div class="ui basic black button">Black</div>
|
|
434
|
+
<div class="ui basic yellow button">Yellow</div>
|
|
435
|
+
<div class="ui basic green button">Green</div>
|
|
436
|
+
<div class="ui basic blue button">Blue</div>
|
|
437
|
+
<div class="ui basic orange button">Orange</div>
|
|
438
|
+
<div class="ui basic purple button">Purple</div>
|
|
439
|
+
<div class="ui basic pink button">Pink</div>
|
|
440
|
+
<div class="ui basic red button">Red</div>
|
|
441
|
+
<div class="ui basic teal button">Teal</div>
|
|
442
|
+
</div>
|
|
447
443
|
<!-- -->
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
<
|
|
452
|
-
<
|
|
453
|
-
<
|
|
454
|
-
<
|
|
455
|
-
<
|
|
456
|
-
<
|
|
457
|
-
<
|
|
458
|
-
<
|
|
444
|
+
<div class="ui left aligned ten wide column">
|
|
445
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
446
|
+
<div class="ui inverted very padded segment">
|
|
447
|
+
<code>__Basic Standard Button|Standard__</code>
|
|
448
|
+
<br /><code>__Basic Black Button|Black__</code>
|
|
449
|
+
<br /><code>__Basic Yellow Button|Yellow__</code>
|
|
450
|
+
<br /><code>__Basic Green Button|Green__</code>
|
|
451
|
+
<br /><code>__Basic Blue Button|Blue__</code>
|
|
452
|
+
<br /><code>__Basic Orange Button|Orange__</code>
|
|
453
|
+
<br /><code>__Basic Purple Button|Purple__</code>
|
|
454
|
+
<br /><code>__Basic Pink Button|Pink__</code>
|
|
455
|
+
<br /><code>__Basic Red Button|Red__</code>
|
|
456
|
+
<br /><code>__Basic Teal Button|Teal__</code>
|
|
459
457
|
</div>
|
|
458
|
+
</div>
|
|
460
459
|
<!-- -->
|
|
461
|
-
|
|
462
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
463
|
-
<div class="ui inverted very padded segment">
|
|
464
|
-
<code>
|
|
465
|
-
__Basic Black Button|Black__
|
|
466
|
-
__Basic Yellow Button|Yellow__
|
|
467
|
-
__Basic Green Button|Green__
|
|
468
|
-
__Basic Blue Button|Blue__
|
|
469
|
-
__Basic Orange Button|Orange__
|
|
470
|
-
__Basic Purple Button|Purple__
|
|
471
|
-
__Basic Pink Button|Pink__
|
|
472
|
-
__Basic Red Button|Red__
|
|
473
|
-
__Basic Teal Button|Teal__
|
|
474
|
-
</code>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
460
|
+
</div>
|
|
477
461
|
<!-- -->
|
|
478
|
-
|
|
462
|
+
<div class="ui attached segment">
|
|
463
|
+
<h3 class="ui header">Inverted</h3>
|
|
464
|
+
<p>A button can be formatted to appear on dark backgrounds</p>
|
|
465
|
+
</div>
|
|
479
466
|
<!-- -->
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
<
|
|
467
|
+
<div class="ui divided segment grid">
|
|
468
|
+
<div class="ui html top attached segment">
|
|
469
|
+
<div class="ui top attached label">Inverted</div>
|
|
483
470
|
</div>
|
|
484
471
|
<!-- -->
|
|
485
|
-
<div class="ui
|
|
486
|
-
<
|
|
487
|
-
|
|
472
|
+
<div class="ui center aligned six wide column">
|
|
473
|
+
<h5 class="ui header">Preview</h5>
|
|
474
|
+
<div class="ui inverted very padded segment">
|
|
475
|
+
<div class="ui inverted standard button">Standard</div>
|
|
476
|
+
<div class="ui inverted black button">Black</div>
|
|
477
|
+
<div class="ui inverted yellow button">Yellow</div>
|
|
478
|
+
<div class="ui inverted green button">Green</div>
|
|
479
|
+
<div class="ui inverted blue button">Blue</div>
|
|
480
|
+
<div class="ui inverted orange button">Orange</div>
|
|
481
|
+
<div class="ui inverted purple button">Purple</div>
|
|
482
|
+
<div class="ui inverted pink button">Pink</div>
|
|
483
|
+
<div class="ui inverted red button">Red</div>
|
|
484
|
+
<div class="ui inverted teal button">Teal</div>
|
|
488
485
|
</div>
|
|
486
|
+
</div>
|
|
489
487
|
<!-- -->
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
</
|
|
488
|
+
<div class="ui left aligned ten wide column">
|
|
489
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
490
|
+
<div class="ui inverted very padded segment">
|
|
491
|
+
<code>> Inverted Segment:</code>
|
|
492
|
+
<br /><code>> __Inverted Standard Button|Standard__</code>
|
|
493
|
+
<br /><code>> __Inverted Black Button|Black__</code>
|
|
494
|
+
<br /><code>> __Inverted Yellow Button|Yellow__</code>
|
|
495
|
+
<br /><code>> __Inverted Green Button|Green__</code>
|
|
496
|
+
<br /><code>> __Inverted Blue Button|Blue__</code>
|
|
497
|
+
<br /><code>> __Inverted Orange Button|Orange__</code>
|
|
498
|
+
<br /><code>> __Inverted Purple Button|Purple__</code>
|
|
499
|
+
<br /><code>> __Inverted Pink Button|Pink__</code>
|
|
500
|
+
<br /><code>> __Inverted Red Button|Red__</code>
|
|
501
|
+
<br /><code>> __Inverted Teal Button|Teal__</code>
|
|
504
502
|
</div>
|
|
503
|
+
</div>
|
|
505
504
|
<!-- -->
|
|
506
|
-
|
|
507
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
508
|
-
<div class="ui inverted very padded segment">
|
|
509
|
-
<code>> Inverted Segment:</code>
|
|
510
|
-
<br />
|
|
511
|
-
<code>> __Inverted Standard Button|Standard__</code>
|
|
512
|
-
<br />
|
|
513
|
-
<code>> __Inverted Black Button|Black__</code>
|
|
514
|
-
<br />
|
|
515
|
-
<code>> __Inverted Yellow Button|Yellow__</code>
|
|
516
|
-
<br />
|
|
517
|
-
<code>> __Inverted Green Button|Green__</code>
|
|
518
|
-
<br />
|
|
519
|
-
<code>> __Inverted Blue Button|Blue__</code>
|
|
520
|
-
<br />
|
|
521
|
-
<code>> __Inverted Orange Button|Orange__</code>
|
|
522
|
-
<br />
|
|
523
|
-
<code>> __Inverted Purple Button|Purple__</code>
|
|
524
|
-
<br />
|
|
525
|
-
<code>> __Inverted Pink Button|Pink__</code>
|
|
526
|
-
<br />
|
|
527
|
-
<code>> __Inverted Red Button|Red__</code>
|
|
528
|
-
<br />
|
|
529
|
-
<code>> __Inverted Teal Button|Teal__</code>
|
|
530
|
-
</div>
|
|
531
|
-
</div>
|
|
505
|
+
</div>
|
|
532
506
|
<!-- -->
|
|
533
|
-
|
|
507
|
+
<div class="ui attached segment">
|
|
508
|
+
<h3 class="ui header">Groups</h3>
|
|
509
|
+
<p>Buttons can exist together as a group</p>
|
|
510
|
+
</div>
|
|
534
511
|
<!-- -->
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
<
|
|
512
|
+
<div class="ui divided segment grid">
|
|
513
|
+
<div class="ui html top attached segment">
|
|
514
|
+
<div class="ui top attached label">Buttons</div>
|
|
538
515
|
</div>
|
|
539
516
|
<!-- -->
|
|
540
|
-
<div class="ui
|
|
541
|
-
<
|
|
542
|
-
|
|
517
|
+
<div class="ui center aligned six wide column">
|
|
518
|
+
<h5 class="ui header">Preview</h5>
|
|
519
|
+
<div class="ui buttons">
|
|
520
|
+
<div id="standard" class="ui button">One</div>
|
|
521
|
+
<div id="standard" class="ui button">Two</div>
|
|
522
|
+
<div id="standard" class="ui button">Three</div>
|
|
543
523
|
</div>
|
|
524
|
+
</div>
|
|
544
525
|
<!-- -->
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
</
|
|
526
|
+
<div class="ui left aligned ten wide column">
|
|
527
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
528
|
+
<div class="ui inverted very padded segment">
|
|
529
|
+
<code>> Buttons:</code>
|
|
530
|
+
<br /><code>> __Standard Button|One__</code>
|
|
531
|
+
<br /><code>> __Standard Button|Two__</code>
|
|
532
|
+
<br /><code>> __Standard Button|Three__</code>
|
|
552
533
|
</div>
|
|
534
|
+
</div>
|
|
553
535
|
<!-- -->
|
|
554
|
-
|
|
555
|
-
<h5 class="ui header">Markdown Syntax</h5>
|
|
556
|
-
<div class="ui inverted very padded segment">
|
|
557
|
-
<code>> Buttons:</code>
|
|
558
|
-
<br />
|
|
559
|
-
<code>> __Standard Button|One__</code>
|
|
560
|
-
<br />
|
|
561
|
-
<code>> __Standard Button|Two__</code>
|
|
562
|
-
<br />
|
|
563
|
-
<code>> __Standard Button|Three__</code>
|
|
564
|
-
</div>
|
|
565
|
-
</div>
|
|
536
|
+
</div>
|
|
566
537
|
<!-- -->
|
|
567
|
-
|
|
538
|
+
<div class="ui attached segment">
|
|
539
|
+
<h3 class="ui header">Icon Buttons</h3>
|
|
540
|
+
<p>Buttons can exist together as a group</p>
|
|
541
|
+
</div>
|
|
568
542
|
<!-- -->
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
<
|
|
543
|
+
<div class="ui divided segment grid">
|
|
544
|
+
<div class="ui html top attached segment">
|
|
545
|
+
<div class="ui top attached label">Buttons</div>
|
|
572
546
|
</div>
|
|
573
547
|
<!-- -->
|
|
574
|
-
<div class="ui
|
|
575
|
-
<
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
<div class="ui center aligned six wide column">
|
|
580
|
-
<h5 class="ui header">Preview</h5>
|
|
581
|
-
<div class="ui icon buttons">
|
|
582
|
-
<div class="ui button">
|
|
583
|
-
<i class="align left icon"></i>
|
|
584
|
-
</div>
|
|
585
|
-
<div class="ui button">
|
|
586
|
-
<i class="align center icon"></i>
|
|
587
|
-
</div>
|
|
588
|
-
<div class="ui button">
|
|
589
|
-
<i class="align right icon"></i>
|
|
590
|
-
</div>
|
|
591
|
-
<div class="ui button">
|
|
592
|
-
<i class="align justify icon"></i>
|
|
593
|
-
</div>
|
|
548
|
+
<div class="ui center aligned six wide column">
|
|
549
|
+
<h5 class="ui header">Preview</h5>
|
|
550
|
+
<div class="ui icon buttons">
|
|
551
|
+
<div class="ui button">
|
|
552
|
+
<i class="align left icon"></i>
|
|
594
553
|
</div>
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
<div class="ui button">
|
|
604
|
-
<i class="text width icon"></i>
|
|
605
|
-
</div>
|
|
554
|
+
<div class="ui button">
|
|
555
|
+
<i class="align center icon"></i>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="ui button">
|
|
558
|
+
<i class="align right icon"></i>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="ui button">
|
|
561
|
+
<i class="align justify icon"></i>
|
|
606
562
|
</div>
|
|
607
563
|
</div>
|
|
608
564
|
<!-- -->
|
|
609
|
-
<div class="ui
|
|
610
|
-
<
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
<
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
<
|
|
618
|
-
<code>> __Button|Icon:Align Right__</code>
|
|
619
|
-
<br />
|
|
620
|
-
<code>> __Button|Icon:Align Justify__</code>
|
|
621
|
-
<br />
|
|
622
|
-
<br />
|
|
623
|
-
<code><!-- A separator is required in between two spaces --></code>
|
|
624
|
-
<br />
|
|
625
|
-
<br />
|
|
626
|
-
<code>> Icon Buttons:</code>
|
|
627
|
-
<br />
|
|
628
|
-
<code>> __Button|Icon:Bold__</code>
|
|
629
|
-
<br />
|
|
630
|
-
<code>> __Button|Icon:Underline__</code>
|
|
631
|
-
<br />
|
|
632
|
-
<code>> __Button|Icon:Text Width__</code>
|
|
565
|
+
<div class="ui icon buttons">
|
|
566
|
+
<div class="ui button">
|
|
567
|
+
<i class="bold icon"></i>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="ui button">
|
|
570
|
+
<i class="underline icon"></i>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="ui button">
|
|
573
|
+
<i class="text width icon"></i>
|
|
633
574
|
</div>
|
|
634
575
|
</div>
|
|
635
|
-
<!-- -->
|
|
636
576
|
</div>
|
|
637
577
|
<!-- -->
|
|
638
|
-
<div class="ui
|
|
639
|
-
<
|
|
640
|
-
<
|
|
578
|
+
<div class="ui left aligned ten wide column">
|
|
579
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
580
|
+
<div class="ui inverted very padded segment">
|
|
581
|
+
<code>> Icon Buttons:</code>
|
|
582
|
+
<br /><code>> __Button|Icon:Align Left__</code>
|
|
583
|
+
<br /><code>> __Button|Icon:Align Center__</code>
|
|
584
|
+
<br /><code>> __Button|Icon:Align Right__</code>
|
|
585
|
+
<br /><code>> __Button|Icon:Align Justify__</code>
|
|
586
|
+
<br /><br /><code><!-- A separator is required in between two spaces --></code>
|
|
587
|
+
<br /><br /><code>> Icon Buttons:</code>
|
|
588
|
+
<br /><code>> __Button|Icon:Bold__</code>
|
|
589
|
+
<br /><code>> __Button|Icon:Underline__</code>
|
|
590
|
+
<br /><code>> __Button|Icon:Text Width__</code>
|
|
591
|
+
</div>
|
|
641
592
|
</div>
|
|
642
593
|
<!-- -->
|
|
643
|
-
|
|
644
|
-
<div class="ui html top attached segment">
|
|
645
|
-
<div class="ui top attached label">Conditionals</div>
|
|
646
|
-
</div>
|
|
594
|
+
</div>
|
|
647
595
|
<!-- -->
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
<div class="or"></div>
|
|
653
|
-
<div class="ui positive button">Save</div>
|
|
654
|
-
</div>
|
|
655
|
-
</div>
|
|
596
|
+
<div class="ui attached segment">
|
|
597
|
+
<h3 class="ui header">Conditionals</h3>
|
|
598
|
+
<p>Button groups can contain conditionals</p>
|
|
599
|
+
</div>
|
|
656
600
|
<!-- -->
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
</div>
|
|
601
|
+
<div class="ui divided segment grid">
|
|
602
|
+
<div class="ui html top attached segment">
|
|
603
|
+
<div class="ui top attached label">Conditionals</div>
|
|
604
|
+
</div>
|
|
605
|
+
<!-- -->
|
|
606
|
+
<div class="ui center aligned six wide column">
|
|
607
|
+
<h5 class="ui header">Preview</h5>
|
|
608
|
+
<div class="ui buttons">
|
|
609
|
+
<div class="ui button">Cancel</div>
|
|
610
|
+
<div class="or"></div>
|
|
611
|
+
<div class="ui positive button">Save</div>
|
|
668
612
|
</div>
|
|
613
|
+
</div>
|
|
669
614
|
<!-- -->
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
</
|
|
615
|
+
<div class="ui left aligned ten wide column">
|
|
616
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
617
|
+
<div class="ui inverted very padded segment">
|
|
618
|
+
<code>> Buttons:</code>
|
|
619
|
+
<br /><code>> __Button|Cancel__</code>
|
|
620
|
+
<br /><code>> __Div Tag||Or__</code>
|
|
621
|
+
<br /><code>> __Positive Button|Save__</code>
|
|
677
622
|
</div>
|
|
623
|
+
</div>
|
|
678
624
|
<!-- -->
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
<br />
|
|
686
|
-
<code>> __Div Tag|Or|Data:Text:ou__</code>
|
|
687
|
-
<br />
|
|
688
|
-
<code>> __Positive Button|deux|Positive-ID__</code>
|
|
689
|
-
</div>
|
|
625
|
+
<div class="ui center aligned six wide column">
|
|
626
|
+
<h5 class="ui header">Preview</h5>
|
|
627
|
+
<div class="ui buttons">
|
|
628
|
+
<div class="ui button">un</div>
|
|
629
|
+
<div class="or" data-text="ou"></div>
|
|
630
|
+
<div id="optional-id" class="ui positive button">deux</div>
|
|
690
631
|
</div>
|
|
632
|
+
</div>
|
|
691
633
|
<!-- -->
|
|
634
|
+
<div class="ui left aligned ten wide column">
|
|
635
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
636
|
+
<div class="ui inverted very padded segment">
|
|
637
|
+
<code>> Buttons:</code>
|
|
638
|
+
<br /><code>> __Button|un__</code>
|
|
639
|
+
<br /><code>> __Div Tag||Or|Data:Text:ou__</code>
|
|
640
|
+
<br /><code>> __Positive Button|deux|<Optional-ID>__</code>
|
|
641
|
+
</div>
|
|
692
642
|
</div>
|
|
643
|
+
<!-- -->
|
|
693
644
|
</div>
|
|
694
645
|
</div>
|
|
646
|
+
|
|
695
647
|
</body>
|
|
696
648
|
</html>
|