uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.e8873dd80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -15
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +353 -96
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +353 -96
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +373 -101
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +373 -101
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +7 -5
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +96 -139
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +96 -139
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +4 -5
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +4 -5
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +4 -5
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +100 -137
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +518 -454
- package/dist/js/uikit-core.min.js +17 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +524 -458
- package/dist/js/uikit.min.js +17 -1
- package/package.json +1 -1
- package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
- package/src/images/components/nav-parent-icon.svg +3 -0
- package/src/images/components/navbar-parent-icon.svg +3 -0
- package/src/images/components/navbar-toggle-icon.svg +25 -3
- package/src/js/api/state.js +2 -2
- package/src/js/components/filter.js +5 -3
- package/src/js/core/accordion.js +9 -17
- package/src/js/core/alert.js +35 -14
- package/src/js/core/drop.js +110 -82
- package/src/js/core/height-viewport.js +6 -2
- package/src/js/core/icon.js +16 -0
- package/src/js/core/index.js +2 -0
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +44 -30
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +18 -11
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +88 -133
- package/src/js/util/animation.js +4 -3
- package/src/js/util/class.js +3 -1
- package/src/js/util/filter.js +3 -7
- package/src/js/util/position.js +107 -107
- package/src/js/util/style.js +4 -13
- package/src/js/util/viewport.js +3 -5
- package/src/less/components/_import.less +1 -0
- package/src/less/components/drop.less +1 -18
- package/src/less/components/dropbar.less +115 -0
- package/src/less/components/dropdown.less +16 -16
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +218 -59
- package/src/less/components/navbar.less +73 -27
- package/src/less/components/utility.less +10 -2
- package/src/less/theme/_import.less +1 -0
- package/src/less/theme/dropbar.less +44 -0
- package/src/less/theme/dropdown.less +0 -11
- package/src/less/theme/nav.less +45 -7
- package/src/less/theme/navbar.less +4 -10
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +115 -0
- package/src/scss/components/dropdown.scss +16 -16
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +167 -47
- package/src/scss/components/navbar.scss +61 -27
- package/src/scss/components/utility.scss +8 -1
- package/src/scss/mixins-theme.scss +92 -24
- package/src/scss/mixins.scss +89 -17
- package/src/scss/theme/_import.scss +1 -0
- package/src/scss/theme/dropbar.scss +44 -0
- package/src/scss/theme/dropdown.scss +0 -8
- package/src/scss/theme/nav.scss +43 -7
- package/src/scss/theme/navbar.scss +4 -7
- package/src/scss/variables-theme.scss +61 -14
- package/src/scss/variables.scss +50 -11
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +455 -375
- package/tests/dropbar.html +458 -0
- package/tests/dropdown.html +26 -401
- package/tests/filter.html +9 -12
- package/tests/form.html +1 -1
- package/tests/index.html +126 -107
- package/tests/js/index.js +1 -4
- package/tests/lightbox.html +5 -5
- package/tests/list.html +8 -8
- package/tests/modal.html +13 -13
- package/tests/nav.html +117 -75
- package/tests/navbar.html +330 -233
- package/tests/offcanvas.html +17 -21
- package/tests/parallax.html +1 -1
- package/tests/position.html +18 -16
- package/tests/progress.html +9 -9
- package/tests/scroll.html +7 -10
- package/tests/search.html +6 -6
- package/tests/slider.html +6 -5
- package/tests/slideshow.html +8 -8
- package/tests/sortable.html +6 -8
- package/tests/sticky-navbar.html +15 -15
- package/tests/sticky.html +8 -8
- package/tests/switcher.html +1 -1
- package/tests/tab.html +1 -1
- package/tests/table.html +7 -7
- package/tests/toggle.html +2 -2
- package/tests/tooltip.html +1 -1
- package/tests/upload.html +11 -11
- package/tests/utility.html +19 -0
- package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/dropdown.html
CHANGED
|
@@ -14,6 +14,13 @@
|
|
|
14
14
|
width: 100%;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
.scroll-container {
|
|
18
|
+
padding: 15px;
|
|
19
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
20
|
+
overflow: auto;
|
|
21
|
+
-webkit-overflow-scrolling: touch;
|
|
22
|
+
}
|
|
23
|
+
|
|
17
24
|
</style>
|
|
18
25
|
</head>
|
|
19
26
|
|
|
@@ -23,6 +30,13 @@
|
|
|
23
30
|
|
|
24
31
|
<h1>Dropdown</h1>
|
|
25
32
|
|
|
33
|
+
<div class="uk-margin">
|
|
34
|
+
<select id="js-size-switcher" class="uk-select uk-form-width-small">
|
|
35
|
+
<option value="">Default</option>
|
|
36
|
+
<option value="uk-dropdown-large">Large</option>
|
|
37
|
+
</select>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
26
40
|
<div uk-grid>
|
|
27
41
|
<div class="uk-width-1-4@m">
|
|
28
42
|
|
|
@@ -63,7 +77,7 @@
|
|
|
63
77
|
|
|
64
78
|
<div class="uk-dropdown test">
|
|
65
79
|
|
|
66
|
-
<ul class="uk-nav uk-
|
|
80
|
+
<ul class="uk-nav uk-nav-secondary">
|
|
67
81
|
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
68
82
|
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
69
83
|
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
|
|
@@ -77,91 +91,6 @@
|
|
|
77
91
|
|
|
78
92
|
<div class="uk-margin" uk-margin>
|
|
79
93
|
|
|
80
|
-
<div class="uk-inline">
|
|
81
|
-
<button class="uk-button uk-button-default" type="button">Hover, Click</button>
|
|
82
|
-
<div uk-dropdown>
|
|
83
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
84
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
85
|
-
<li class="uk-parent">
|
|
86
|
-
<a href="#">Parent</a>
|
|
87
|
-
<ul class="uk-nav-sub">
|
|
88
|
-
<li><a href="#">Sub item</a></li>
|
|
89
|
-
<li><a href="#">Sub item</a></li>
|
|
90
|
-
</ul>
|
|
91
|
-
</li>
|
|
92
|
-
<li class="uk-nav-header">Header</li>
|
|
93
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
94
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
95
|
-
<li class="uk-nav-divider"></li>
|
|
96
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
97
|
-
</ul>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div class="uk-inline">
|
|
102
|
-
<button class="uk-button uk-button-default" type="button">Click only</button>
|
|
103
|
-
<div uk-dropdown="mode: click">
|
|
104
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
105
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
106
|
-
<li class="uk-parent">
|
|
107
|
-
<a href="#">Parent</a>
|
|
108
|
-
<ul class="uk-nav-sub">
|
|
109
|
-
<li><a href="#">Sub item</a></li>
|
|
110
|
-
<li><a href="#">Sub item</a></li>
|
|
111
|
-
</ul>
|
|
112
|
-
</li>
|
|
113
|
-
<li class="uk-nav-header">Header</li>
|
|
114
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
115
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
116
|
-
<li class="uk-nav-divider"></li>
|
|
117
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
118
|
-
</ul>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<div class="uk-inline">
|
|
123
|
-
<button class="uk-button uk-button-default" type="button">Hover only</button>
|
|
124
|
-
<div uk-dropdown="mode: hover">
|
|
125
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
126
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
127
|
-
<li class="uk-parent">
|
|
128
|
-
<a href="#">Parent</a>
|
|
129
|
-
<ul class="uk-nav-sub">
|
|
130
|
-
<li><a href="#">Sub item</a></li>
|
|
131
|
-
<li><a href="#">Sub item</a></li>
|
|
132
|
-
</ul>
|
|
133
|
-
</li>
|
|
134
|
-
<li class="uk-nav-header">Header</li>
|
|
135
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
136
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
137
|
-
<li class="uk-nav-divider"></li>
|
|
138
|
-
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
139
|
-
</ul>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<div class="uk-inline">
|
|
144
|
-
<button class="uk-button uk-button-default" type="button">Out Animation</button>
|
|
145
|
-
<div uk-dropdown="animate-out: true">
|
|
146
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
147
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
148
|
-
<li><a href="#">Item</a></li>
|
|
149
|
-
<li><a href="#">Item</a></li>
|
|
150
|
-
</ul>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<div class="uk-inline">
|
|
155
|
-
<button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
|
|
156
|
-
<div uk-dropdown="mode: click">
|
|
157
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
158
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
159
|
-
<li><a href="#">Item</a></li>
|
|
160
|
-
<li><a href="#">Item</a></li>
|
|
161
|
-
</ul>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
94
|
<div class="uk-inline">
|
|
166
95
|
<button class="uk-button uk-button-default" type="button">Scrollable</button>
|
|
167
96
|
<div class="uk-overflow-auto uk-height-medium" uk-dropdown>
|
|
@@ -183,19 +112,6 @@
|
|
|
183
112
|
</div>
|
|
184
113
|
</div>
|
|
185
114
|
|
|
186
|
-
<div class="uk-inline">
|
|
187
|
-
<button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
|
|
188
|
-
<button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
|
|
189
|
-
<button class="uk-button uk-button-default" type="button">Target</button>
|
|
190
|
-
<div uk-dropdown>
|
|
191
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
192
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
193
|
-
<li><a href="#">Item</a></li>
|
|
194
|
-
<li><a href="#">Item</a></li>
|
|
195
|
-
</ul>
|
|
196
|
-
</div>
|
|
197
|
-
</div>
|
|
198
|
-
|
|
199
115
|
</div>
|
|
200
116
|
|
|
201
117
|
<h2>Position</h2>
|
|
@@ -235,17 +151,6 @@
|
|
|
235
151
|
</div>
|
|
236
152
|
</div>
|
|
237
153
|
|
|
238
|
-
<div class="uk-inline">
|
|
239
|
-
<button class="uk-button uk-button-default" type="button">Bottom Justify</button>
|
|
240
|
-
<div uk-dropdown="pos: bottom-justify">
|
|
241
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
242
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
243
|
-
<li><a href="#">Item</a></li>
|
|
244
|
-
<li><a href="#">Item</a></li>
|
|
245
|
-
</ul>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
|
|
249
154
|
</div>
|
|
250
155
|
|
|
251
156
|
<div class="uk-margin" uk-margin>
|
|
@@ -283,17 +188,6 @@
|
|
|
283
188
|
</div>
|
|
284
189
|
</div>
|
|
285
190
|
|
|
286
|
-
<div class="uk-inline">
|
|
287
|
-
<button class="uk-button uk-button-default" type="button">Top Justify</button>
|
|
288
|
-
<div uk-dropdown="pos: top-justify">
|
|
289
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
290
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
291
|
-
<li><a href="#">Item</a></li>
|
|
292
|
-
<li><a href="#">Item</a></li>
|
|
293
|
-
</ul>
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
296
|
-
|
|
297
191
|
</div>
|
|
298
192
|
|
|
299
193
|
<div class="uk-margin" uk-margin>
|
|
@@ -373,290 +267,21 @@
|
|
|
373
267
|
</div>
|
|
374
268
|
</div>
|
|
375
269
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
<div class="uk-margin" uk-margin>
|
|
379
|
-
|
|
380
|
-
<div class="uk-inline">
|
|
381
|
-
<button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
|
|
382
|
-
<div uk-dropdown="pos: bottom-stretch; animate-out: true">
|
|
383
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
384
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
385
|
-
<li><a href="#">Item</a></li>
|
|
386
|
-
<li><a href="#">Item</a></li>
|
|
387
|
-
</ul>
|
|
388
|
-
</div>
|
|
389
|
-
</div>
|
|
390
|
-
|
|
391
|
-
<div class="uk-inline">
|
|
392
|
-
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
|
|
393
|
-
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
394
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
395
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
396
|
-
<li><a href="#">Item</a></li>
|
|
397
|
-
<li><a href="#">Item</a></li>
|
|
398
|
-
</ul>
|
|
399
|
-
</div>
|
|
400
|
-
</div>
|
|
401
|
-
|
|
402
|
-
<div class="uk-inline">
|
|
403
|
-
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
|
|
404
|
-
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
405
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
406
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
407
|
-
<li><a href="#">Item</a></li>
|
|
408
|
-
<li><a href="#">Item</a></li>
|
|
409
|
-
</ul>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
|
|
413
|
-
<div class="uk-inline">
|
|
414
|
-
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
|
|
415
|
-
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
416
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
417
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
418
|
-
<li><a href="#">Item</a></li>
|
|
419
|
-
<li><a href="#">Item</a></li>
|
|
420
|
-
</ul>
|
|
421
|
-
</div>
|
|
422
|
-
</div>
|
|
423
|
-
|
|
424
|
-
</div>
|
|
425
|
-
|
|
426
|
-
<div class="uk-margin" uk-margin>
|
|
427
|
-
|
|
428
|
-
<div class="uk-inline">
|
|
429
|
-
<button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
|
|
430
|
-
<div uk-dropdown="pos: top-stretch; animate-out: true">
|
|
431
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
432
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
433
|
-
<li><a href="#">Item</a></li>
|
|
434
|
-
<li><a href="#">Item</a></li>
|
|
435
|
-
</ul>
|
|
436
|
-
</div>
|
|
437
|
-
</div>
|
|
438
|
-
|
|
439
|
-
<div class="uk-inline">
|
|
440
|
-
<button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
|
|
441
|
-
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
|
|
442
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
443
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
444
|
-
<li><a href="#">Item</a></li>
|
|
445
|
-
<li><a href="#">Item</a></li>
|
|
446
|
-
</ul>
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
|
|
450
|
-
<div class="uk-inline">
|
|
451
|
-
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
|
|
452
|
-
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
|
|
453
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
454
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
455
|
-
<li><a href="#">Item</a></li>
|
|
456
|
-
<li><a href="#">Item</a></li>
|
|
457
|
-
</ul>
|
|
458
|
-
</div>
|
|
459
|
-
</div>
|
|
460
|
-
|
|
461
|
-
<div class="uk-inline">
|
|
462
|
-
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
|
|
463
|
-
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
464
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
465
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
466
|
-
<li><a href="#">Item</a></li>
|
|
467
|
-
<li><a href="#">Item</a></li>
|
|
468
|
-
</ul>
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
|
|
472
|
-
</div>
|
|
473
|
-
|
|
474
|
-
<div class="uk-margin" uk-margin>
|
|
475
|
-
|
|
476
|
-
<div class="uk-inline">
|
|
477
|
-
<button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
|
|
478
|
-
<div uk-dropdown="pos: left-stretch; animate-out: true">
|
|
479
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
480
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
481
|
-
<li><a href="#">Item</a></li>
|
|
482
|
-
<li><a href="#">Item</a></li>
|
|
483
|
-
</ul>
|
|
484
|
-
</div>
|
|
485
|
-
</div>
|
|
486
|
-
|
|
487
|
-
<div class="uk-inline">
|
|
488
|
-
<button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
|
|
489
|
-
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
|
|
490
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
491
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
492
|
-
<li><a href="#">Item</a></li>
|
|
493
|
-
<li><a href="#">Item</a></li>
|
|
494
|
-
</ul>
|
|
495
|
-
</div>
|
|
496
|
-
</div>
|
|
497
|
-
|
|
498
|
-
<div class="uk-inline">
|
|
499
|
-
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
|
|
500
|
-
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
501
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
502
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
503
|
-
<li><a href="#">Item</a></li>
|
|
504
|
-
<li><a href="#">Item</a></li>
|
|
505
|
-
</ul>
|
|
506
|
-
</div>
|
|
507
|
-
</div>
|
|
508
|
-
|
|
509
|
-
<div class="uk-inline">
|
|
510
|
-
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
|
|
511
|
-
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
512
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
513
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
514
|
-
<li><a href="#">Item</a></li>
|
|
515
|
-
<li><a href="#">Item</a></li>
|
|
516
|
-
</ul>
|
|
517
|
-
</div>
|
|
518
|
-
</div>
|
|
519
|
-
|
|
520
|
-
</div>
|
|
521
|
-
|
|
522
|
-
<div class="uk-margin" uk-margin>
|
|
523
|
-
|
|
524
|
-
<div class="uk-inline">
|
|
525
|
-
<button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
|
|
526
|
-
<div uk-dropdown="pos: right-stretch; animate-out: true">
|
|
527
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
528
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
529
|
-
<li><a href="#">Item</a></li>
|
|
530
|
-
<li><a href="#">Item</a></li>
|
|
531
|
-
</ul>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
|
|
535
|
-
<div class="uk-inline">
|
|
536
|
-
<button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
|
|
537
|
-
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
|
|
538
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
539
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
540
|
-
<li><a href="#">Item</a></li>
|
|
541
|
-
<li><a href="#">Item</a></li>
|
|
542
|
-
</ul>
|
|
543
|
-
</div>
|
|
544
|
-
</div>
|
|
545
|
-
|
|
546
|
-
<div class="uk-inline">
|
|
547
|
-
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
|
|
548
|
-
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
549
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
550
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
551
|
-
<li><a href="#">Item</a></li>
|
|
552
|
-
<li><a href="#">Item</a></li>
|
|
553
|
-
</ul>
|
|
554
|
-
</div>
|
|
555
|
-
</div>
|
|
270
|
+
</div>
|
|
556
271
|
|
|
557
|
-
|
|
558
|
-
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
|
|
559
|
-
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
|
|
560
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
561
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
562
|
-
<li><a href="#">Item</a></li>
|
|
563
|
-
<li><a href="#">Item</a></li>
|
|
564
|
-
</ul>
|
|
565
|
-
</div>
|
|
566
|
-
</div>
|
|
272
|
+
<script>
|
|
567
273
|
|
|
568
|
-
|
|
274
|
+
const {$$, addClass, on, removeClass } = UIkit.util;
|
|
569
275
|
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
<th>Value</th>
|
|
578
|
-
<th>Default</th>
|
|
579
|
-
<th>Description</th>
|
|
580
|
-
</tr>
|
|
581
|
-
</thead>
|
|
582
|
-
<tbody>
|
|
583
|
-
<tr>
|
|
584
|
-
<td><code>toggle</code></td>
|
|
585
|
-
<td>String, Boolean</td>
|
|
586
|
-
<td>'- *'</td>
|
|
587
|
-
<td>CSS selector for the element to be used as toggle. By default, the preceding element is used.</td>
|
|
588
|
-
</tr>
|
|
589
|
-
<tr>
|
|
590
|
-
<td><code>pos</code></td>
|
|
591
|
-
<td>String</td>
|
|
592
|
-
<td>'bottom-left'</td>
|
|
593
|
-
<td>Dropdown position.</td>
|
|
594
|
-
</tr>
|
|
595
|
-
<tr>
|
|
596
|
-
<td><code>mode</code></td>
|
|
597
|
-
<td>hover | click</td>
|
|
598
|
-
<td>click,hover</td>
|
|
599
|
-
<td>Comma separated list of dropdown trigger behaviour modes.</td>
|
|
600
|
-
</tr>
|
|
601
|
-
<tr>
|
|
602
|
-
<td><code>delay-show</code></td>
|
|
603
|
-
<td>Number</td>
|
|
604
|
-
<td>0</td>
|
|
605
|
-
<td>Delay time in hover mode before a Dropdown is shown in ms.</td>
|
|
606
|
-
</tr>
|
|
607
|
-
<tr>
|
|
608
|
-
<td><code>delay-hide</code></td>
|
|
609
|
-
<td>Number</td>
|
|
610
|
-
<td>800</td>
|
|
611
|
-
<td>Delay time in hover mode before a Dropdown is hidden in ms.</td>
|
|
612
|
-
</tr>
|
|
613
|
-
<tr>
|
|
614
|
-
<td><code>boundary</code></td>
|
|
615
|
-
<td>CSS selector</td>
|
|
616
|
-
<td>true</td>
|
|
617
|
-
<td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
|
|
618
|
-
</tr>
|
|
619
|
-
<tr>
|
|
620
|
-
<td><code>boundary-align</code></td>
|
|
621
|
-
<td>Boolean</td>
|
|
622
|
-
<td>false</td>
|
|
623
|
-
<td>Align Drop to boundary.</td>
|
|
624
|
-
</tr>
|
|
625
|
-
<tr>
|
|
626
|
-
<td><code>flip</code></td>
|
|
627
|
-
<td>false|true|'x'|'y'</td>
|
|
628
|
-
<td>true</td>
|
|
629
|
-
<td>Automatic Dropdown flip.</td>
|
|
630
|
-
</tr>
|
|
631
|
-
<tr>
|
|
632
|
-
<td><code>offset</code></td>
|
|
633
|
-
<td>Number</td>
|
|
634
|
-
<td>0</td>
|
|
635
|
-
<td>The offset of the Dropdown container.</td>
|
|
636
|
-
</tr>
|
|
637
|
-
<tr>
|
|
638
|
-
<td><code>animation</code></td>
|
|
639
|
-
<td>String</td>
|
|
640
|
-
<td>false</td>
|
|
641
|
-
<td>The space separated names of animations to use.</td>
|
|
642
|
-
</tr>
|
|
643
|
-
<tr>
|
|
644
|
-
<td><code>duration</code></td>
|
|
645
|
-
<td>Number</td>
|
|
646
|
-
<td>200</td>
|
|
647
|
-
<td>The animation duration.</td>
|
|
648
|
-
</tr>
|
|
649
|
-
<tr>
|
|
650
|
-
<td><code>container</code></td>
|
|
651
|
-
<td>Boolean</td>
|
|
652
|
-
<td>false</td>
|
|
653
|
-
<td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
|
|
654
|
-
</tr>
|
|
655
|
-
</tbody>
|
|
656
|
-
</table>
|
|
657
|
-
</div>
|
|
276
|
+
on('#js-size-switcher', 'change', (e) => {
|
|
277
|
+
const options = $$('option', e.target).map(({value}) => value);
|
|
278
|
+
for (const dropdown of $$('.uk-dropdown')) {
|
|
279
|
+
removeClass(dropdown, options);
|
|
280
|
+
addClass(dropdown, e.target.value);
|
|
281
|
+
}
|
|
282
|
+
});
|
|
658
283
|
|
|
659
|
-
</
|
|
284
|
+
</script>
|
|
660
285
|
|
|
661
286
|
</body>
|
|
662
287
|
</html>
|
package/tests/filter.html
CHANGED
|
@@ -20,18 +20,15 @@
|
|
|
20
20
|
|
|
21
21
|
<script>
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
util.attr(util.$$('.js-filter-animation'), 'animation', this.value);
|
|
33
|
-
});
|
|
34
|
-
|
|
23
|
+
const {$$, attr, on, ready} = UIkit.util;
|
|
24
|
+
|
|
25
|
+
ready(() => {
|
|
26
|
+
on(document.body, 'beforeFilter afterFilter', (e, filter, state) =>
|
|
27
|
+
console.log(e.type, filter, state)
|
|
28
|
+
);
|
|
29
|
+
on('#js-animation-switcher', 'change', () =>
|
|
30
|
+
attr($$('.js-filter-animation'), 'animation', this.value)
|
|
31
|
+
);
|
|
35
32
|
});
|
|
36
33
|
|
|
37
34
|
</script>
|
package/tests/form.html
CHANGED
|
@@ -313,7 +313,7 @@
|
|
|
313
313
|
<label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
|
|
314
314
|
</div>
|
|
315
315
|
|
|
316
|
-
<script>UIkit.util.$$('.js-indeterminate').forEach(
|
|
316
|
+
<script>UIkit.util.$$('.js-indeterminate').forEach(el => { el.indeterminate = true; })</script>
|
|
317
317
|
|
|
318
318
|
</div>
|
|
319
319
|
|