UNPKG

14.5 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>Switcher - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-container">
14
15 <h1>Switcher</h1>
16
17 <div>
18
19 <ul class="uk-tab" uk-switcher="animation: uk-animation-fade">
20 <li><a href="#">Active</a></li>
21 <li><a href="#">Item</a></li>
22 <li><a href="#">Item</a></li>
23 <li class="uk-disabled"><a>Disabled</a></li>
24 </ul>
25
26 <ul class="uk-switcher uk-margin">
27 <li>Hello! <a href="#" uk-switcher-item="2">Switch to tab 3</a></li>
28 <li>Hello again! <a href="#" uk-switcher-item="next">Next tab</a></li>
29 <li>Bazinga! <a href="#" uk-switcher-item="previous">Previous tab</a></li>
30 <li>You will never see me!</li>
31 </ul>
32
33 <ul class="uk-switcher uk-margin">
34 <li>Hello! The first item.</li>
35 <li>Hello again! The second item.</li>
36 <li>Bazinga! The third item.</li>
37 <li>You will never see me!</li>
38 </ul>
39
40 </div>
41
42 <h2>Animations</h2>
43
44 <div class="uk-child-width-1-4@m" uk-grid>
45 <div>
46
47 <h3>Fade</h3>
48
49 <ul uk-tab="animation: uk-animation-fade">
50 <li><a href="#">Active</a></li>
51 <li><a href="#">Item</a></li>
52 <li><a href="#">Item</a></li>
53 </ul>
54
55 <ul class="uk-switcher uk-margin">
56 <li>Hello!</li>
57 <li>Hello again!</li>
58 <li>Bazinga!</li>
59 </ul>
60
61 </div>
62 <div>
63
64 <h3>Slide Bottom</h3>
65
66 <ul uk-tab="animation: uk-animation-slide-bottom">
67 <li><a href="#">Active</a></li>
68 <li><a href="#">Item</a></li>
69 <li><a href="#">Item</a></li>
70 </ul>
71
72 <ul class="uk-switcher uk-margin">
73 <li>Hello!</li>
74 <li>Hello again!</li>
75 <li>Bazinga!</li>
76 </ul>
77
78 </div>
79 <div>
80
81 <h3>Slide Left</h3>
82
83 <ul uk-tab="animation: uk-animation-slide-left">
84 <li><a href="#">Active</a></li>
85 <li><a href="#">Item</a></li>
86 <li><a href="#">Item</a></li>
87 </ul>
88
89 <ul class="uk-switcher uk-margin">
90 <li>Hello!</li>
91 <li>Hello again!</li>
92 <li>Bazinga!</li>
93 </ul>
94
95 </div>
96 <div>
97
98 <h3>Slide Right</h3>
99
100 <ul uk-tab="animation: uk-animation-slide-right">
101 <li><a href="#">Active</a></li>
102 <li><a href="#">Item</a></li>
103 <li><a href="#">Item</a></li>
104 </ul>
105
106 <ul class="uk-switcher uk-margin">
107 <li>Hello!</li>
108 <li>Hello again!</li>
109 <li>Bazinga!</li>
110 </ul>
111
112 </div>
113 <div>
114
115 <h3>Slide Horiontal</h3>
116
117 <ul uk-tab="animation: uk-animation-slide-left, uk-animation-slide-right">
118 <li><a href="#">Active</a></li>
119 <li><a href="#">Item</a></li>
120 <li><a href="#">Item</a></li>
121 </ul>
122
123 <ul class="uk-switcher uk-margin">
124 <li>Hello!</li>
125 <li>Hello again!</li>
126 <li>Bazinga!</li>
127 </ul>
128
129 </div>
130 <div>
131
132 <h3>Slide Vertical</h3>
133
134 <ul uk-tab="animation: uk-animation-slide-top, uk-animation-slide-bottom">
135 <li><a href="#">Active</a></li>
136 <li><a href="#">Item</a></li>
137 <li><a href="#">Item</a></li>
138 </ul>
139
140 <ul class="uk-switcher uk-margin">
141 <li>Hello!</li>
142 <li>Hello again!</li>
143 <li>Bazinga!</li>
144 </ul>
145
146 </div>
147 <div>
148
149 <h3>Slide Left Small</h3>
150
151 <ul uk-tab="animation: uk-animation-slide-left-small">
152 <li><a href="#">Active</a></li>
153 <li><a href="#">Item</a></li>
154 <li><a href="#">Item</a></li>
155 </ul>
156
157 <ul class="uk-switcher uk-margin">
158 <li>Hello!</li>
159 <li>Hello again!</li>
160 <li>Bazinga!</li>
161 </ul>
162
163 </div>
164 <div>
165
166 <h3>Slide Right Small</h3>
167
168 <ul uk-tab="animation: uk-animation-slide-right-small">
169 <li><a href="#">Active</a></li>
170 <li><a href="#">Item</a></li>
171 <li><a href="#">Item</a></li>
172 </ul>
173
174 <ul class="uk-switcher uk-margin">
175 <li>Hello!</li>
176 <li>Hello again!</li>
177 <li>Bazinga!</li>
178 </ul>
179
180 </div>
181 </div>
182
183 <h2>Other Components</h2>
184
185 <div class="uk-child-width-1-2@m" uk-grid>
186 <div>
187
188 <h3>Tab Left</h3>
189
190 <div uk-grid>
191 <div class="uk-width-auto@m">
192
193 <ul class="uk-tab-left" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
194 <li><a href="#">Active</a></li>
195 <li><a href="#">Item</a></li>
196 <li><a href="#">Item</a></li>
197 </ul>
198
199 </div>
200 <div class="uk-width-expand@m">
201
202 <ul id="component-tab-left" class="uk-switcher">
203 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
204 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
205 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
206 </ul>
207
208 </div>
209 </div>
210
211 </div>
212 <div>
213
214 <h3>Tab Right</h3>
215
216 <div uk-grid>
217 <div class="uk-width-auto@m uk-flex-last@m">
218
219 <ul class="uk-tab-right" uk-tab="connect: #component-tab-right; animation: uk-animation-fade">
220 <li><a href="#">Active</a></li>
221 <li><a href="#">Item</a></li>
222 <li><a href="#">Item</a></li>
223 </ul>
224
225 </div>
226 <div class="uk-width-expand@m">
227
228 <ul id="component-tab-right" class="uk-switcher">
229 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
230 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
231 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
232 </ul>
233
234 </div>
235 </div>
236
237 </div>
238 <div>
239
240 <h3>Button</h3>
241
242 <p uk-switcher="animation: uk-animation-fade; toggle: > *">
243 <a class="uk-button uk-button-default" href="#">Link</a>
244 <button class="uk-button uk-button-default" type="button">Button</button>
245 <button class="uk-button uk-button-default" type="button">Button</button>
246 </p>
247
248 <ul class="uk-switcher">
249 <li>Hello!</li>
250 <li>Hello again!</li>
251 <li>Bazinga!</li>
252 </ul>
253
254 </div>
255 <div>
256
257 <h3>Button Group</h3>
258
259 <p>
260 <div class="uk-button-group" uk-switcher="connect: #component-button-group; animation: uk-animation-fade; toggle: > *">
261 <a class="uk-button uk-button-default" href="#">Link</a>
262 <button class="uk-button uk-button-default" type="button">Button</button>
263 <button class="uk-button uk-button-default" type="button">Button</button>
264 </div>
265 </p>
266
267 <ul id="component-button-group" class="uk-switcher">
268 <li>Hello!</li>
269 <li>Hello again!</li>
270 <li>Bazinga!</li>
271 </ul>
272
273 </div>
274 <div>
275
276 <h3>Nav</h3>
277
278 <div uk-grid>
279 <div class="uk-width-1-3@m">
280
281 <ul class="uk-nav uk-nav-default" uk-switcher="connect: #component-nav; animation: uk-animation-fade">
282 <li><a href="#">Active</a></li>
283 <li><a href="#">Item</a></li>
284 <li class="uk-nav-header">Header</li>
285 <li><a href="#">Item</a></li>
286 </ul>
287
288 </div>
289 <div class="uk-width-2-3@m">
290
291 <ul id="component-nav" class="uk-switcher">
292 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
293 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
294 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
295 </ul>
296
297 </div>
298 </div>
299
300 </div>
301 <div>
302
303 <h3>Subnav Pill</h3>
304
305 <ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade">
306 <li><a href="#">Active</a></li>
307 <li><a href="#">Item</a></li>
308 <li><a href="#">Item</a></li>
309 </ul>
310
311 <ul class="uk-switcher">
312 <li>Hello!</li>
313 <li>Hello again!</li>
314 <li>Bazinga!</li>
315 </ul>
316
317 </div>
318 </div>
319
320 <h2>JavaScript Options</h2>
321
322 <div class="uk-overflow-auto">
323 <table class="uk-table uk-table-striped">
324 <thead>
325 <tr>
326 <th>Option</th>
327 <th>Value</th>
328 <th>Default</th>
329 <th>Description</th>
330 </tr>
331 </thead>
332 <tbody>
333 <tr>
334 <td><code>connect</code></td>
335 <td>CSS selector</td>
336 <td>~.uk-switcher</td>
337 <td>Related items container. By default succeeding elements with class 'uk-switcher'.</td>
338 </tr>
339 <tr>
340 <td><code>toggle</code></td>
341 <td>CSS selector</td>
342 <td>> * > :first-child</td>
343 <td>Toggle selector - triggers content switching on click.</td>
344 </tr>
345 <tr>
346 <td><code>active</code></td>
347 <td>Number</td>
348 <td>0</td>
349 <td>Active index on init. (Providing a negative number indicates a position starting from the end of the set)</td>
350 </tr>
351 <tr>
352 <td><code>animation</code></td>
353 <td>String</td>
354 <td>false</td>
355 <td>The space separated names of animations to use. (Comma separate for animation out)</td>
356 </tr>
357 <tr>
358 <td><code>duration</code></td>
359 <td>Number</td>
360 <td>200</td>
361 <td>The animation duration.</td>
362 </tr>
363 <tr>
364 <td><code>swiping</code></td>
365 <td>Boolean</td>
366 <td>true</td>
367 <td>Use swiping.</td>
368 </tr>
369 </tbody>
370 </table>
371 </div>
372
373 </div>
374
375 </body>
376</html>