UNPKG

7.38 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4
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.0, maximum-scale=1.0">
8 <title>Theming - Semantic</title>
9
10 <!--- Site CSS -->
11 <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
12 <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
13 <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
14
15 <!--- Component CSS -->
16 <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
17 <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
18 <link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
19 <link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
20 <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
21 <link rel="stylesheet" type="text/css" href="../../dist/components/segment.css">
22 <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
23 <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
24
25 <!--- Example Libs -->
26 <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
27 <script src="../assets/library/jquery.min.js"></script>
28 <script src="../assets/library/iframe-content.js"></script>
29 <script src="../assets/show-examples.js"></script>
30 <script type="text/javascript" src="../../dist/components/popup.js"></script>
31
32 <!--- Component JS -->
33 <script type="text/javascript" src="../../dist/components/transition.js"></script>
34 <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
35
36 <!--- Example CSS -->
37 <style>
38 body {
39 padding: 1em;
40 }
41 .spaced > .button {
42 margin-bottom: 1em;
43 }
44 </style>
45
46 <!--- Example Javascript -->
47 <script>
48 $(document)
49 .ready(function() {
50 $('.ui.dropdown').dropdown();
51
52 $('.ui.buttons .dropdown.button').dropdown({
53 action: 'combo'
54 });
55 })
56 ;
57 </script>
58</head>
59
60<body>
61
62<div class="ui stackable equal width grid">
63 <div class="column">
64 <button class="ui button">Default</button>
65 <button class="ui primary button">Primary</button>
66 <button class="ui secondary button">Secondary</button>
67 <button class="ui basic button">Basic</button>
68 <button class="ui compact button">
69 Compact
70 </button>
71
72 <div class="ui divider"></div>
73 <button class="ui icon button">
74 <i class="heart icon"></i>
75 </button>
76 <button class="ui labeled icon button">
77 <i class="heart icon"></i>
78 Labeled
79 </button>
80 <button class="ui right labeled icon button">
81 <i class="heart icon"></i>
82 Labeled
83 </button>
84
85 <div class="ui divider"></div>
86
87 <div class="ui buttons">
88 <button class="ui button">Combo</button>
89 <div class="ui floating dropdown icon button">
90 <i class="dropdown icon"></i>
91 <div class="menu">
92 <div class="item">Choice 1</div>
93 <div class="item">Choice 2</div>
94 <div class="item">Choice 3</div>
95 </div>
96 </div>
97 </div>
98
99 <div class="ui floating search dropdown button">
100 <span class="text">Search Dropdown</span>
101 <div class="menu">
102 <div class="item">Arabic</div>
103 <div class="item">Chinese</div>
104 <div class="item">Danish</div>
105 <div class="item">Dutch</div>
106 <div class="item">English</div>
107 <div class="item">French</div>
108 <div class="item">German</div>
109 <div class="item">Greek</div>
110 <div class="item">Hungarian</div>
111 <div class="item">Italian</div>
112 <div class="item">Japanese</div>
113 <div class="item">Korean</div>
114 <div class="item">Lithuanian</div>
115 <div class="item">Persian</div>
116 <div class="item">Polish</div>
117 <div class="item">Portuguese</div>
118 <div class="item">Russian</div>
119 <div class="item">Spanish</div>
120 <div class="item">Swedish</div>
121 <div class="item">Turkish</div>
122 <div class="item">Vietnamese</div>
123 </div>
124 </div>
125
126 <div class="ui divider"></div>
127
128 <div class="ui animated button" tabindex="0">
129 <div class="visible content">Horizontal</div>
130 <div class="hidden content">
131 Hidden
132 </div>
133 </div>
134 <div class="ui vertical animated button" tabindex="0">
135 <div class="visible content">Vertical</div>
136 <div class="hidden content">
137 Hidden
138 </div>
139 </div>
140 <div class="ui animated fade button" tabindex="0">
141 <div class="visible content">Fade In</div>
142 <div class="hidden content">
143 Hidden
144 </div>
145 </div>
146
147 <div class="ui divider"></div>
148 <button class="ui disabled button">Disabled</button>
149 <button class="ui loading button">Loading</button>
150
151 <div class="ui divider"></div>
152
153 <div class="ui buttons">
154 <button class="ui button">1</button>
155 <button class="ui button">2</button>
156 <button class="ui button">3</button>
157 </div>
158
159 <div class="ui icon buttons">
160 <button class="ui button"><i class="align left icon"></i></button>
161 <button class="ui button"><i class="align center icon"></i></button>
162 <button class="ui button"><i class="align right icon"></i></button>
163 <button class="ui button"><i class="align justify icon"></i></button>
164 </div>
165
166 <div class="ui buttons">
167 <button class="ui button">1</button>
168 <div class="or"></div>
169 <button class="ui button">2</button>
170 </div>
171
172 <div class="ui divider"></div>
173
174 <div class="ui two top attached buttons">
175 <div class="ui button">One</div>
176 <div class="ui button">Two</div>
177 </div>
178 <div class="ui attached segment">
179 <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
180 </div>
181 <div class="ui two bottom attached buttons">
182 <div class="ui button">One</div>
183 <div class="ui button">Two</div>
184 </div>
185
186 </div>
187 <div class="column">
188 <button class="ui mini button">Mini</button>
189 <button class="ui tiny button">Tiny</button>
190 <button class="ui small button">Small</button>
191 <button class="ui large button">Large</button>
192 <button class="ui big button">Big</button>
193 <button class="ui huge button">Huge</button>
194 <button class="ui massive button">Massive</button>
195 <div class="ui divider"></div>
196 <div class="spaced">
197 <button class="yellow ui button">Yellow</button>
198 <button class="orange ui button">Orange</button>
199 <button class="green ui button">Green</button>
200 <button class="teal ui button">Teal</button>
201 <button class="blue ui button">Blue</button>
202 <button class="purple ui button">Purple</button>
203 <button class="pink ui button">Pink</button>
204 <button class="red ui button">Red</button>
205 <button class="black ui button">Black</button>
206 </div>
207
208
209 <div class="ui divider"></div>
210
211 <div class="ui inverted segment">
212 <button class="ui inverted button">Inverted</button>
213 <button class="ui inverted basic button">Basic</button>
214 <button class="ui inverted blue button">Colored</button>
215 <button class="ui inverted blue basic button">Basic Colored</button>
216 </div>
217
218 </div>
219</div>
220
221</body>
222</html>
\No newline at end of file