UNPKG

9.15 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>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>