UNPKG

16.8 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Utility - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-container">
14
15 <h1>Utility</h1>
16
17 <div class="uk-child-width-1-2@m" uk-grid>
18 <div>
19
20 <div class="uk-panel">
21 <h2>Panel</h2>
22 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
23 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
24 </div>
25
26 </div>
27 <div>
28
29 <h2>Panel Scrollable</h2>
30
31 <div class="uk-panel uk-panel-scrollable">
32 <ul class="uk-list">
33 <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
34 <li>
35 <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
36 <ul>
37 <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
38 <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
39 <li>
40 <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
41 <ul>
42 <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
43 <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
44 </ul>
45 </li>
46 <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
47 </ul>
48 </li>
49 <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
50 <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
51 </ul>
52
53 </div>
54
55 </div>
56 <div>
57
58 <h2>Overflow Auto</h2>
59
60 <div class="uk-overflow-auto">
61 <table class="uk-table uk-table-striped uk-table-small uk-text-nowrap">
62 <thead>
63 <tr>
64 <th>Table Heading</th>
65 <th>Table Heading</th>
66 <th>Table Heading</th>
67 <th>Table Heading</th>
68 <th>Table Heading</th>
69 <th>Table Heading</th>
70 </tr>
71 </thead>
72 <tfoot>
73 <tr>
74 <td>Table Footer</td>
75 <td>Table Footer</td>
76 <td>Table Footer</td>
77 <td>Table Footer</td>
78 <td>Table Footer</td>
79 <td>Table Footer</td>
80 </tr>
81 </tfoot>
82 <tbody>
83 <tr>
84 <td>Table Data</td>
85 <td>Table Data</td>
86 <td>Table Data</td>
87 <td>Table Data</td>
88 <td>Table Data</td>
89 <td>Table Data</td>
90 </tr>
91 <tr>
92 <td>Table Data</td>
93 <td>Table Data</td>
94 <td>Table Data</td>
95 <td>Table Data</td>
96 <td>Table Data</td>
97 <td>Table Data</td>
98 </tr>
99 <tr>
100 <td>Table Data</td>
101 <td>Table Data</td>
102 <td>Table Data</td>
103 <td>Table Data</td>
104 <td>Table Data</td>
105 <td>Table Data</td>
106 </tr>
107 </tbody>
108 </table>
109 </div>
110
111 </div>
112 <div>
113
114 <h2>Pre scrollable</h2>
115
116<pre class="uk-overflow-auto uk-height-medium uk-resize"><code>&lt;div uk-grid&gt;
117 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
118 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
119&lt;/div&gt;
120
121&lt;div uk-grid&gt;
122 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
123 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
124&lt;/div&gt;
125
126&lt;div uk-grid&gt;
127 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
128 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
129&lt;/div&gt;
130
131&lt;div uk-grid&gt;
132 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
133 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
134&lt;/div&gt;
135
136&lt;div uk-grid&gt;
137 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
138 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
139&lt;/div&gt;
140
141&lt;div uk-grid&gt;
142 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
143 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
144&lt;/div&gt;
145
146&lt;div uk-grid&gt;
147 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
148 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
149&lt;/div&gt;
150
151&lt;div uk-grid&gt;
152 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
153 &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
154&lt;/div&gt;</code></pre>
155
156 </div>
157 </div>
158
159 <h2>Overflow Auto JS</h2>
160
161 <div class="uk-child-width-1-2@m" uk-grid>
162 <div>
163
164 <div class="uk-height-medium">
165 <div class="js-wrapper">
166
167 <p>Some content before the overflow auto container.</p>
168
169 <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
170 <div class="uk-grid-small" uk-grid>
171 <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
172 <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
173 </div>
174 </div>
175
176 <p>Some content after the overflow auto container.</p>
177
178 </div>
179 </div>
180
181 </div>
182 <div>
183
184 <div class="uk-height-medium">
185 <div class="js-wrapper">
186
187 <p>Some content before the overflow auto container.</p>
188
189 <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
190 <div class="uk-grid-small" uk-grid>
191 <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
192 <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
193 <div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
194 <div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
195 </div>
196 </div>
197
198 <p>Some content after the overflow auto container.</p>
199
200 </div>
201 </div>
202
203 </div>
204 </div>
205
206 <h3>JavaScript Options</h3>
207
208 <table class="uk-table uk-table-striped">
209 <thead>
210 <tr>
211 <th>Option</th>
212 <th>Value</th>
213 <th>Default</th>
214 <th>Description</th>
215 </tr>
216 </thead>
217 <tbody>
218 <tr>
219 <td><code>selContainer</code></td>
220 <td>CSS selector</td>
221 <td><code>.uk-modal</code></td>
222 <td>The container element which provides the height.</td>
223 </tr>
224 <tr>
225 <td><code>selContent</code></td>
226 <td>CSS selector</td>
227 <td><code>.uk-modal-dialog</code></td>
228 <td>The element which wraps the inner content to provide its height.</td>
229 </tr>
230 </tbody>
231 </table>
232
233 <h2>Responsive Objects</h2>
234
235 <div class="uk-child-width-1-3@s" uk-grid>
236 <div>
237 <p>JS Responsive Width (Iframe)</p>
238 <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive></iframe>
239 </div>
240 <div>
241 <p>Responsive Height (Image)</p>
242 <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" alt=""></p>
243 </div>
244 </div>
245
246 <h2>Box-shadows</h2>
247
248 <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
249 <div>
250
251 <div class="uk-inline uk-box-shadow-hover-small">
252 <img class="uk-invisible" src="images/photo.jpg" alt="">
253 <div class="uk-position-center">Hover</div>
254 </div>
255
256 </div>
257 <div>
258
259 <div class="uk-inline uk-box-shadow-small">
260 <img class="uk-invisible" src="images/photo.jpg" alt="">
261 <div class="uk-position-center">Small</div>
262 </div>
263
264 </div>
265 <div>
266
267 <div class="uk-inline uk-box-shadow-medium">
268 <img class="uk-invisible" src="images/photo.jpg" alt="">
269 <div class="uk-position-center">Medium</div>
270 </div>
271
272 </div>
273 <div>
274
275 <div class="uk-inline uk-box-shadow-large">
276 <img class="uk-invisible" src="images/photo.jpg" alt="">
277 <div class="uk-position-center">Large</div>
278 </div>
279
280 </div>
281 <div>
282
283 <div class="uk-inline uk-box-shadow-xlarge">
284 <img class="uk-invisible" src="images/photo.jpg" alt="">
285 <div class="uk-position-center">X-Large</div>
286 </div>
287
288 </div>
289 <div>
290
291 <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" alt="">
292
293 </div>
294 <div>
295
296 <img class="uk-box-shadow-small" src="images/photo.jpg" alt="">
297
298 </div>
299 <div>
300
301 <img class="uk-box-shadow-medium" src="images/photo.jpg" alt="">
302
303 </div>
304 <div>
305
306 <img class="uk-box-shadow-large" src="images/photo.jpg" alt="">
307
308 </div>
309 <div>
310
311 <img class="uk-box-shadow-xlarge" src="images/photo.jpg" alt="">
312
313 </div>
314 <div>
315
316 <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" alt="">
317
318 </div>
319 <div>
320
321 <img class="uk-box-shadow-small" src="images/light.jpg" alt="">
322
323 </div>
324 <div>
325
326 <img class="uk-box-shadow-medium" src="images/light.jpg" alt="">
327
328 </div>
329 <div>
330
331 <img class="uk-box-shadow-large" src="images/light.jpg" alt="">
332
333 </div>
334 <div>
335
336 <img class="uk-box-shadow-xlarge" src="images/light.jpg" alt="">
337
338 </div>
339 <div>
340
341 <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" alt="">
342
343 </div>
344 <div>
345
346 <img class="uk-box-shadow-small" src="images/dark.jpg" alt="">
347
348 </div>
349 <div>
350
351 <img class="uk-box-shadow-medium" src="images/dark.jpg" alt="">
352
353 </div>
354 <div>
355
356 <img class="uk-box-shadow-large" src="images/dark.jpg" alt="">
357
358 </div>
359 <div>
360
361 <img class="uk-box-shadow-xlarge" src="images/dark.jpg" alt="">
362
363 </div>
364 </div>
365
366 <h2>Box-shadow Bottom</h2>
367
368 <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
369 <div class="uk-width-1-6@m">
370
371 <div class="uk-box-shadow-bottom">
372 <img src="images/photo.jpg" alt="">
373 </div>
374
375 </div>
376 <div class="uk-width-1-3@m">
377
378 <div class="uk-box-shadow-bottom">
379 <img src="images/photo.jpg" alt="">
380 </div>
381
382 </div>
383 <div class="uk-width-1-2@m">
384
385 <div class="uk-box-shadow-bottom">
386 <img src="images/photo.jpg" alt="">
387 </div>
388
389 </div>
390 </div>
391
392 <h2>Drop Cap</h2>
393
394 <p class="uk-text-lead uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
395
396 <div class="uk-dropcap">
397 <p>Torem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
398 </div>
399
400 <h1>Logo</h1>
401
402 <p>
403 <a class="uk-logo" href="#">Text Logo</a>
404 </p>
405
406 <div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
407 <div>
408 <p>Image</p>
409 <a class="uk-logo" href="#">
410 <img src="images/photo.jpg" width="200" alt="">
411 </a>
412 </div>
413 <div>
414 <p>+ Inverse Image</p>
415 <a class="uk-logo" href="#">
416 <img src="images/photo.jpg" width="200" alt="">
417 <img class="uk-logo-inverse" src="images/dark.jpg" width="200" alt="">
418 </a>
419 </div>
420 </div>
421
422 </div>
423
424 </body>
425</html>