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>Tab - UIkit tests</title>
|
8 | <script src="js/test.js"></script>
|
9 | </head>
|
10 |
|
11 | <body>
|
12 |
|
13 | <div class="uk-container">
|
14 |
|
15 | <h1>Tab</h1>
|
16 |
|
17 | <div class="uk-child-width-1-2@m" uk-grid>
|
18 | <div>
|
19 |
|
20 | <h2>Top</h2>
|
21 |
|
22 | <ul uk-tab>
|
23 | <li class="uk-active"><a href="#">Left</a></li>
|
24 | <li><a href="#">Item</a></li>
|
25 | <li><a href="#">Item</a></li>
|
26 | <li><a href="#">Item</a></li>
|
27 | <li><a href="#">Item</a></li>
|
28 | <li class="uk-disabled"><a>Disabled</a></li>
|
29 | </ul>
|
30 |
|
31 | <ul class="uk-flex-right" uk-tab>
|
32 | <li class="uk-active"><a href="#">Right</a></li>
|
33 | <li><a href="#">Item</a></li>
|
34 | <li><a href="#">Item</a></li>
|
35 | <li><a href="#">Item</a></li>
|
36 | <li><a href="#">Item</a></li>
|
37 | <li class="uk-disabled"><a>Disabled</a></li>
|
38 | </ul>
|
39 |
|
40 | <ul class="uk-flex-center" uk-tab>
|
41 | <li class="uk-active"><a href="#">Center</a></li>
|
42 | <li><a href="#">Item</a></li>
|
43 | <li><a href="#">Item</a></li>
|
44 | <li><a href="#">Item</a></li>
|
45 | <li><a href="#">Item</a></li>
|
46 | <li><a href="#">Item</a></li>
|
47 | </ul>
|
48 |
|
49 | <ul class="uk-child-width-1-5" uk-tab>
|
50 | <li class="uk-active"><a href="#">Justify</a></li>
|
51 | <li><a href="#">Item</a></li>
|
52 | <li><a href="#">Item</a></li>
|
53 | <li><a href="#">Item</a></li>
|
54 | <li><a href="#">Item</a></li>
|
55 | </ul>
|
56 |
|
57 | </div>
|
58 | <div>
|
59 |
|
60 | <h2>Bottom</h2>
|
61 |
|
62 | <ul class="uk-tab-bottom" uk-tab>
|
63 | <li class="uk-active"><a href="#">Left</a></li>
|
64 | <li><a href="#">Item</a></li>
|
65 | <li><a href="#">Item</a></li>
|
66 | <li><a href="#">Item</a></li>
|
67 | <li><a href="#">Item</a></li>
|
68 | <li class="uk-disabled"><a>Disabled</a></li>
|
69 | </ul>
|
70 |
|
71 | <ul class="uk-tab-bottom uk-flex-right" uk-tab>
|
72 | <li class="uk-active"><a href="#">Right</a></li>
|
73 | <li><a href="#">Item</a></li>
|
74 | <li><a href="#">Item</a></li>
|
75 | <li><a href="#">Item</a></li>
|
76 | <li><a href="#">Item</a></li>
|
77 | <li class="uk-disabled"><a>Disabled</a></li>
|
78 | </ul>
|
79 |
|
80 | <ul class="uk-tab-bottom uk-flex-center" uk-tab>
|
81 | <li class="uk-active"><a href="#">Center</a></li>
|
82 | <li><a href="#">Item</a></li>
|
83 | <li><a href="#">Item</a></li>
|
84 | <li><a href="#">Item</a></li>
|
85 | <li><a href="#">Item</a></li>
|
86 | </ul>
|
87 |
|
88 | <ul class="uk-tab-bottom uk-child-width-1-5" uk-tab>
|
89 | <li class="uk-active"><a href="#">Justify</a></li>
|
90 | <li><a href="#">Item</a></li>
|
91 | <li><a href="#">Item</a></li>
|
92 | <li><a href="#">Item</a></li>
|
93 | <li><a href="#">Item</a></li>
|
94 | </ul>
|
95 |
|
96 | </div>
|
97 | </div>
|
98 |
|
99 | <h2>Left/Right</h2>
|
100 |
|
101 | <div class="uk-child-width-auto" uk-grid>
|
102 | <div>
|
103 |
|
104 | <ul class="uk-tab-left" uk-tab>
|
105 | <li class="uk-active"><a href="#">Active</a></li>
|
106 | <li><a href="#">Item</a></li>
|
107 | <li><a href="#">Item</a></li>
|
108 | <li><a href="#">Item</a></li>
|
109 | <li><a href="#">Item</a></li>
|
110 | <li><a href="#">Item</a></li>
|
111 | <li><a href="#">Item</a></li>
|
112 | </ul>
|
113 |
|
114 | </div>
|
115 | <div>
|
116 |
|
117 | <ul class="uk-tab-right" uk-tab>
|
118 | <li class="uk-active"><a href="#">Active</a></li>
|
119 | <li><a href="#">Item</a></li>
|
120 | <li><a href="#">Item</a></li>
|
121 | <li><a href="#">Item</a></li>
|
122 | <li><a href="#">Item</a></li>
|
123 | <li><a href="#">Item</a></li>
|
124 | <li><a href="#">Item</a></li>
|
125 | </ul>
|
126 |
|
127 | </div>
|
128 | </div>
|
129 |
|
130 | <h2>Dropdown</h2>
|
131 |
|
132 | <div class="uk-margin">
|
133 |
|
134 | <ul class="uk-width-1-2@m" uk-tab>
|
135 | <li class="uk-active"><a href="#">Active</a></li>
|
136 | <li><a href="#">Item</a></li>
|
137 | <li><a href="#">Item</a></li>
|
138 | <li>
|
139 | <a href="#">More <span class="uk-margin-small-left" uk-icon="icon: trash"></span></a>
|
140 | <div uk-dropdown="mode: click">
|
141 | <ul class="uk-nav uk-dropdown-nav">
|
142 | <li class="uk-active"><a href="#">Active</a></li>
|
143 | <li class="uk-parent"><a href="#">Item</a></li>
|
144 | <li class="uk-nav-header">Header</li>
|
145 | <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
146 | <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
147 | <li class="uk-nav-divider"></li>
|
148 | <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
149 | </ul>
|
150 | </div>
|
151 | </li>
|
152 | </ul>
|
153 |
|
154 | </div>
|
155 |
|
156 | <h2>JavaScript Options</h2>
|
157 |
|
158 | <div class="uk-overflow-auto">
|
159 | <table class="uk-table uk-table-striped">
|
160 | <thead>
|
161 | <tr>
|
162 | <th>Option</th>
|
163 | <th>Value</th>
|
164 | <th>Default</th>
|
165 | <th>Description</th>
|
166 | </tr>
|
167 | </thead>
|
168 | <tbody>
|
169 | <tr>
|
170 | <td><code>connect</code></td>
|
171 | <td>CSS selector</td>
|
172 | <td>false</td>
|
173 | <td>Related items container. By default next element with class 'uk-switcher'.</td>
|
174 | </tr>
|
175 | <tr>
|
176 | <td><code>toggle</code></td>
|
177 | <td>CSS selector</td>
|
178 | <td>> *</td>
|
179 | <td>Toggle selector - triggers content switching on click.</td>
|
180 | </tr>
|
181 | <tr>
|
182 | <td><code>active</code></td>
|
183 | <td>Number</td>
|
184 | <td>0</td>
|
185 | <td>Active index on init. (Providing a negative number indicates a position starting from the end of the set)</td>
|
186 | </tr>
|
187 | <tr>
|
188 | <td><code>animation</code></td>
|
189 | <td>String</td>
|
190 | <td>false</td>
|
191 | <td>The space separated names of animations to use. (Comma separate for animation out)</td>
|
192 | </tr>
|
193 | <tr>
|
194 | <td><code>duration</code></td>
|
195 | <td>Number</td>
|
196 | <td>200</td>
|
197 | <td>The animation duration.</td>
|
198 | </tr>
|
199 | <tr>
|
200 | <td><code>swiping</code></td>
|
201 | <td>Boolean</td>
|
202 | <td>true</td>
|
203 | <td>Use swiping.</td>
|
204 | </tr>
|
205 | <tr>
|
206 | <td><code>media</code></td>
|
207 | <td>Integer|String</td>
|
208 | <td>960</td>
|
209 | <td>When to become horizontal - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
|
210 | </tr>
|
211 | </tbody>
|
212 | </table>
|
213 | </div>
|
214 |
|
215 | </div>
|
216 |
|
217 | </body>
|
218 | </html>
|