uikit 3.14.4-dev.e2919bbf7 → 3.14.4-dev.eb440d70c
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 +30 -17
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +281 -61
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +281 -61
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +301 -65
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +301 -65
- 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 +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +96 -131
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +96 -131
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +4 -2
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +2 -2
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +2 -2
- 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 +2 -2
- 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 +99 -136
- 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 +483 -455
- 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 +486 -456
- package/dist/js/uikit.min.js +17 -1
- package/package.json +11 -11
- package/src/images/components/navbar-toggle-icon.svg +25 -3
- package/src/js/api/hooks.js +5 -1
- package/src/js/api/state.js +2 -2
- package/src/js/components/notification.js +3 -1
- 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 +4 -2
- package/src/js/core/navbar.js +30 -45
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/media.js +1 -1
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +21 -22
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +88 -124
- package/src/js/util/animation.js +9 -7
- 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/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 +126 -0
- package/src/less/components/dropdown.less +6 -20
- package/src/less/components/nav.less +211 -22
- package/src/less/components/navbar.less +17 -51
- 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 +46 -0
- package/src/less/theme/navbar.less +1 -5
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +126 -0
- package/src/scss/components/dropdown.scss +6 -20
- package/src/scss/components/nav.scss +160 -21
- package/src/scss/components/navbar.scss +17 -51
- package/src/scss/mixins-theme.scss +78 -7
- package/src/scss/mixins.scss +75 -3
- 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 +44 -0
- package/src/scss/theme/navbar.scss +1 -5
- package/src/scss/variables-theme.scss +54 -9
- package/src/scss/variables.scss +43 -7
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +446 -416
- package/tests/dropbar.html +458 -0
- package/tests/dropdown.html +8 -470
- package/tests/filter.html +9 -12
- package/tests/form.html +1 -1
- package/tests/index.html +124 -105
- 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 +121 -12
- package/tests/navbar.html +112 -227
- package/tests/offcanvas.html +10 -14
- 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/drop.html
CHANGED
|
@@ -8,21 +8,14 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
.boundary {
|
|
11
|
+
.test-boundary {
|
|
12
12
|
padding: 15px;
|
|
13
13
|
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
|
-
overflow: auto;
|
|
15
|
-
-webkit-overflow-scrolling: touch;
|
|
16
14
|
}
|
|
17
15
|
|
|
18
|
-
.boundary-overflow { width: 250%; }
|
|
16
|
+
.test-boundary-overflow { width: 250%; }
|
|
19
17
|
|
|
20
|
-
.
|
|
21
|
-
padding: 15px;
|
|
22
|
-
border: 1px dashed rgba(0,0,0,0.2);
|
|
23
|
-
overflow: auto;
|
|
24
|
-
-webkit-overflow-scrolling: touch;
|
|
25
|
-
}
|
|
18
|
+
.gap { gap: 10px; }
|
|
26
19
|
|
|
27
20
|
</style>
|
|
28
21
|
</head>
|
|
@@ -33,557 +26,550 @@
|
|
|
33
26
|
|
|
34
27
|
<h1>Drop</h1>
|
|
35
28
|
|
|
29
|
+
<div class="uk-margin uk-form-stacked">
|
|
30
|
+
<select id="js-style-switcher" class="uk-select uk-form-width-small">
|
|
31
|
+
<option value="uk-dropdown">Dropdown</option>
|
|
32
|
+
<option value="uk-dropbar">Dropbar</option>
|
|
33
|
+
<option value="uk-card uk-card-body uk-card-default">Card Default</option>
|
|
34
|
+
<option value="uk-card uk-card-body uk-card-primary">Card Primary</option>
|
|
35
|
+
</select>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
36
38
|
<div class="uk-margin" uk-margin>
|
|
37
39
|
|
|
38
40
|
<div class="uk-inline">
|
|
39
41
|
<button class="uk-button uk-button-default" type="button">Hover, Click</button>
|
|
40
|
-
<div
|
|
41
|
-
<div id="parent-drop-card" class="uk-card uk-card-body uk-card-default">
|
|
42
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
43
|
-
|
|
44
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
45
|
-
<div id="child-drop" uk-drop="pos: right-center; offset: 50">
|
|
46
|
-
<div id="child-drop-card" class="uk-card uk-card-body uk-card-default">
|
|
47
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
48
|
-
|
|
49
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
50
|
-
<div id="child-child-drop" uk-drop="pos: right-center; offset: 50">
|
|
51
|
-
<div id="child-child-drop-card" class="uk-card uk-card-body uk-card-default">
|
|
52
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
53
|
-
|
|
54
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
55
|
-
<div id="child-child-child-drop" uk-drop="pos: right-center; offset: 50">
|
|
56
|
-
<div id="child-child-child-drop-card" class="uk-card uk-card-body uk-card-default">
|
|
57
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
42
|
+
<div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
67
43
|
</div>
|
|
68
44
|
|
|
69
45
|
<div class="uk-inline">
|
|
70
46
|
<button class="uk-button uk-button-default" type="button">Click only</button>
|
|
71
|
-
<div
|
|
72
|
-
<div id="parent-drop-card-click" class="uk-card uk-card-body uk-card-default">
|
|
73
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
74
|
-
|
|
75
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
76
|
-
<div id="child-drop-click" uk-drop="pos: right-center; offset: 50; mode: click">
|
|
77
|
-
<div id="child-drop-card-click" class="uk-card uk-card-body uk-card-default">
|
|
78
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
79
|
-
|
|
80
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
81
|
-
<div id="child-child-drop-click" uk-drop="pos: right-center; offset: 50; mode: click">
|
|
82
|
-
<div id="child-child-drop-card-click" class="uk-card uk-card-body uk-card-default">
|
|
83
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
84
|
-
|
|
85
|
-
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
86
|
-
<div id="child-child-child-drop-click" uk-drop="pos: right-center; offset: 50; mode: click">
|
|
87
|
-
<div id="child-child-child-drop-card-click" class="uk-card uk-card-body uk-card-default">
|
|
88
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
47
|
+
<div class="uk-dropdown" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
98
48
|
</div>
|
|
99
49
|
|
|
100
50
|
<div class="uk-inline">
|
|
101
51
|
<button class="uk-button uk-button-default" type="button">Hover only</button>
|
|
102
|
-
<div uk-drop="mode: hover
|
|
103
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
104
|
-
</div>
|
|
52
|
+
<div class="uk-dropdown" uk-drop="mode: hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
105
53
|
</div>
|
|
106
54
|
|
|
107
55
|
<div class="uk-inline">
|
|
108
|
-
<button class="uk-button uk-button-default" type="button">
|
|
109
|
-
<div uk-
|
|
110
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
56
|
+
<button class="uk-button uk-button-default" type="button">Nested Hover</button>
|
|
57
|
+
<div class="uk-dropdown" uk-drop>
|
|
113
58
|
|
|
114
|
-
|
|
59
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
60
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
61
|
+
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
|
|
115
62
|
|
|
116
|
-
|
|
63
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
64
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
65
|
+
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
|
|
117
66
|
|
|
118
|
-
|
|
67
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
68
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
|
|
69
|
+
<div id="child-child-child-drop" class="uk-dropdown" uk-drop="pos: right-top; offset: 50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
119
70
|
|
|
120
|
-
|
|
121
|
-
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
122
|
-
<div uk-drop>
|
|
123
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
71
|
+
</div>
|
|
126
72
|
|
|
127
|
-
|
|
128
|
-
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
129
|
-
<div uk-drop="pos: bottom-center">
|
|
130
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
73
|
+
</div>
|
|
133
74
|
|
|
134
|
-
<div class="uk-inline">
|
|
135
|
-
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
136
|
-
<div uk-drop="pos: bottom-right">
|
|
137
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
138
75
|
</div>
|
|
139
76
|
</div>
|
|
140
77
|
|
|
141
78
|
<div class="uk-inline">
|
|
142
|
-
<button class="uk-button uk-button-default" type="button">
|
|
143
|
-
<div uk-drop="
|
|
144
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
79
|
+
<button class="uk-button uk-button-default" type="button">Nested Click</button>
|
|
80
|
+
<div class="uk-dropdown" uk-drop="mode: click">
|
|
147
81
|
|
|
148
|
-
|
|
82
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
83
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
84
|
+
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
|
|
149
85
|
|
|
150
|
-
|
|
86
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
87
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
88
|
+
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
|
|
89
|
+
|
|
90
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
91
|
+
<button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
|
|
92
|
+
<div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
93
|
+
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
151
97
|
|
|
152
|
-
<div class="uk-inline">
|
|
153
|
-
<button class="uk-button uk-button-default" type="button">Top Left</button>
|
|
154
|
-
<div uk-drop="pos: top-left">
|
|
155
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
156
98
|
</div>
|
|
157
99
|
</div>
|
|
158
100
|
|
|
159
101
|
<div class="uk-inline">
|
|
160
|
-
<button class="uk-button uk-button-default" type="button">
|
|
161
|
-
<div uk-
|
|
162
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
163
|
-
</div>
|
|
102
|
+
<button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
|
|
103
|
+
<div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
164
104
|
</div>
|
|
165
105
|
|
|
166
106
|
<div class="uk-inline">
|
|
167
|
-
<button class="uk-button uk-button-default" type="button">
|
|
168
|
-
<div uk-drop="pos: top-right">
|
|
169
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
170
|
-
</div>
|
|
107
|
+
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #js-multiple-toggles; mode: click,hover">Same</button>
|
|
171
108
|
</div>
|
|
172
109
|
|
|
173
110
|
<div class="uk-inline">
|
|
174
|
-
<button class="uk-button uk-button-default" type="button">
|
|
175
|
-
<div
|
|
176
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
177
|
-
</div>
|
|
111
|
+
<button class="uk-button uk-button-default" type="button">Same</button>
|
|
112
|
+
<div id="js-multiple-toggles" class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
178
113
|
</div>
|
|
179
114
|
|
|
180
115
|
</div>
|
|
181
116
|
|
|
182
|
-
<
|
|
117
|
+
<h2>Position</h2>
|
|
183
118
|
|
|
119
|
+
<div class="uk-margin uk-form-stacked">
|
|
184
120
|
<div class="uk-inline">
|
|
185
|
-
<
|
|
186
|
-
<
|
|
187
|
-
<
|
|
188
|
-
|
|
121
|
+
<label class="uk-form-label" for="js-boundary-switcher">Boundary</label>
|
|
122
|
+
<select id="js-boundary-switcher" class="uk-select uk-form-width-small">
|
|
123
|
+
<option value="false">Viewport</option>
|
|
124
|
+
<option value="!.test-boundary">Box</option>
|
|
125
|
+
</select>
|
|
189
126
|
</div>
|
|
190
|
-
|
|
191
127
|
<div class="uk-inline">
|
|
192
|
-
<
|
|
193
|
-
|
|
194
|
-
<
|
|
195
|
-
|
|
128
|
+
<label class="uk-form-label" for="js-target-x-switcher">Target X</label>
|
|
129
|
+
<select id="js-target-x-switcher" class="uk-select uk-form-width-small">
|
|
130
|
+
<option value="false">Toggle</option>
|
|
131
|
+
<option value="!.test-boundary">Box</option>
|
|
132
|
+
<option value="true">Viewport</option>
|
|
133
|
+
</select>
|
|
196
134
|
</div>
|
|
197
|
-
|
|
198
135
|
<div class="uk-inline">
|
|
199
|
-
<
|
|
200
|
-
<
|
|
201
|
-
<
|
|
202
|
-
|
|
136
|
+
<label class="uk-form-label" for="js-target-y-switcher">Target Y</label>
|
|
137
|
+
<select id="js-target-y-switcher" class="uk-select uk-form-width-small">
|
|
138
|
+
<option value="false">Toggle</option>
|
|
139
|
+
<option value="!.test-boundary">Box</option>
|
|
140
|
+
<option value="true">Viewport</option>
|
|
141
|
+
</select>
|
|
203
142
|
</div>
|
|
204
|
-
|
|
205
|
-
</div>
|
|
206
|
-
|
|
207
|
-
<div class="uk-margin" uk-margin>
|
|
208
|
-
|
|
209
143
|
<div class="uk-inline">
|
|
210
|
-
<
|
|
211
|
-
<
|
|
212
|
-
<
|
|
213
|
-
|
|
144
|
+
<label class="uk-form-label" for="js-inset-switcher">Inset</label>
|
|
145
|
+
<select id="js-inset-switcher" class="uk-select uk-form-width-xsmall">
|
|
146
|
+
<option value="false">False</option>
|
|
147
|
+
<option value="true">True</option>
|
|
148
|
+
</select>
|
|
214
149
|
</div>
|
|
215
|
-
|
|
216
150
|
<div class="uk-inline">
|
|
217
|
-
<
|
|
218
|
-
<
|
|
219
|
-
<
|
|
220
|
-
|
|
151
|
+
<label class="uk-form-label" for="js-stretch-switcher">Stretch</label>
|
|
152
|
+
<select id="js-stretch-switcher" class="uk-select uk-form-width-xsmall">
|
|
153
|
+
<option value="false">False</option>
|
|
154
|
+
<option value="true">True</option>
|
|
155
|
+
<option value="x">X</option>
|
|
156
|
+
<option value="y">Y</option>
|
|
157
|
+
</select>
|
|
221
158
|
</div>
|
|
222
|
-
|
|
223
159
|
<div class="uk-inline">
|
|
224
|
-
<
|
|
225
|
-
<
|
|
226
|
-
<
|
|
227
|
-
|
|
160
|
+
<label class="uk-form-label" for="js-animation-switcher">Animation</label>
|
|
161
|
+
<select id="js-animation-switcher" class="uk-select uk-form-width-small">
|
|
162
|
+
<option value="uk-animation-fade">Fade</option>
|
|
163
|
+
<option value="slide-top">Slide Top</option>
|
|
164
|
+
<option value="slide-bottom">Slide Bottom</option>
|
|
165
|
+
<option value="slide-left">Slide Left</option>
|
|
166
|
+
<option value="slide-right">Slide Right</option>
|
|
167
|
+
<option value="reveal-top">Reveal Top</option>
|
|
168
|
+
<option value="reveal-bottom">Reveal Bottom</option>
|
|
169
|
+
<option value="reveal-left">Reveal Left</option>
|
|
170
|
+
<option value="reveal-right">Reveal Right</option>
|
|
171
|
+
</select>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="uk-inline">
|
|
174
|
+
<label class="uk-form-label" for="js-animate-out-switcher">Out</label>
|
|
175
|
+
<select id="js-animate-out-switcher" class="uk-select uk-form-width-xsmall">
|
|
176
|
+
<option value="false">False</option>
|
|
177
|
+
<option value="true">True</option>
|
|
178
|
+
</select>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="uk-inline">
|
|
181
|
+
<label class="uk-form-label" for="js-duration-switcher">Duration</label>
|
|
182
|
+
<select id="js-duration-switcher" class="uk-select uk-form-width-xsmall">
|
|
183
|
+
<option value="200">Default</option>
|
|
184
|
+
<option value="2000">Slow</option>
|
|
185
|
+
</select>
|
|
228
186
|
</div>
|
|
229
|
-
|
|
230
187
|
</div>
|
|
231
188
|
|
|
232
|
-
<
|
|
189
|
+
<div class="uk-child-width-1-2@m" uk-grid>
|
|
190
|
+
<div>
|
|
233
191
|
|
|
234
|
-
|
|
235
|
-
<select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
|
|
236
|
-
<option value="">Resize</option>
|
|
237
|
-
<option value="boundary-overflow">Scroll</option>
|
|
238
|
-
</select>
|
|
239
|
-
</div>
|
|
192
|
+
<p>Default</p>
|
|
240
193
|
|
|
241
|
-
|
|
242
|
-
|
|
194
|
+
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
|
|
195
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
243
196
|
|
|
244
|
-
<div class="boundary uk-height-large uk-resize-horizontal uk-margin">
|
|
245
|
-
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
246
197
|
<div>
|
|
198
|
+
<button class="uk-button uk-button-default" type="button">Top Left</button>
|
|
199
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
200
|
+
</div>
|
|
247
201
|
|
|
248
|
-
|
|
249
|
-
<
|
|
202
|
+
<div>
|
|
203
|
+
<button class="uk-button uk-button-default" type="button">Top Center</button>
|
|
204
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
205
|
+
</div>
|
|
250
206
|
|
|
207
|
+
<div>
|
|
208
|
+
<button class="uk-button uk-button-default" type="button">Top Right</button>
|
|
209
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
251
210
|
</div>
|
|
211
|
+
|
|
252
212
|
</div>
|
|
253
|
-
|
|
213
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
|
|
254
214
|
|
|
255
|
-
|
|
256
|
-
<div class="uk-width-1-2@m">
|
|
215
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
|
|
257
216
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
217
|
+
<div>
|
|
218
|
+
<button class="uk-button uk-button-default" type="button">Left Top</button>
|
|
219
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
220
|
+
</div>
|
|
261
221
|
|
|
262
|
-
<
|
|
263
|
-
|
|
222
|
+
<div>
|
|
223
|
+
<button class="uk-button uk-button-default" type="button">Left Center</button>
|
|
224
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div>
|
|
228
|
+
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
|
|
229
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
230
|
+
</div>
|
|
264
231
|
|
|
265
232
|
</div>
|
|
266
|
-
</div>
|
|
267
|
-
</div>
|
|
268
233
|
|
|
269
|
-
|
|
270
|
-
</div>
|
|
234
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
|
|
271
235
|
|
|
272
|
-
|
|
236
|
+
<div>
|
|
237
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
238
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
239
|
+
</div>
|
|
273
240
|
|
|
274
|
-
|
|
275
|
-
|
|
241
|
+
<div>
|
|
242
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
243
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
244
|
+
</div>
|
|
276
245
|
|
|
277
|
-
|
|
278
|
-
|
|
246
|
+
<div>
|
|
247
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
248
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
249
|
+
</div>
|
|
279
250
|
|
|
280
|
-
|
|
281
|
-
<div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
251
|
+
</div>
|
|
282
252
|
|
|
283
253
|
</div>
|
|
284
|
-
<div>
|
|
254
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
285
255
|
|
|
286
|
-
<
|
|
287
|
-
|
|
256
|
+
<div>
|
|
257
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
258
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
259
|
+
</div>
|
|
288
260
|
|
|
289
|
-
|
|
290
|
-
|
|
261
|
+
<div>
|
|
262
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
263
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
264
|
+
</div>
|
|
291
265
|
|
|
292
|
-
<
|
|
293
|
-
|
|
266
|
+
<div>
|
|
267
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
268
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
269
|
+
</div>
|
|
294
270
|
|
|
295
271
|
</div>
|
|
296
|
-
<div>
|
|
297
272
|
|
|
298
|
-
<button class="uk-button uk-button-default" type="button">Bottom Justify</button>
|
|
299
|
-
<div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
300
|
-
|
|
301
|
-
</div>
|
|
302
273
|
</div>
|
|
303
274
|
|
|
304
275
|
</div>
|
|
305
276
|
<div>
|
|
306
277
|
|
|
307
|
-
<
|
|
308
|
-
<div>
|
|
278
|
+
<p>Switched Alignment</p>
|
|
309
279
|
|
|
310
|
-
|
|
311
|
-
|
|
280
|
+
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
|
|
281
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
312
282
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
283
|
+
<div>
|
|
284
|
+
<button class="uk-button uk-button-default" type="button">Top Right</button>
|
|
285
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
286
|
+
</div>
|
|
318
287
|
|
|
319
|
-
|
|
320
|
-
|
|
288
|
+
<div>
|
|
289
|
+
<button class="uk-button uk-button-default" type="button">Top Center</button>
|
|
290
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
291
|
+
</div>
|
|
321
292
|
|
|
322
|
-
<
|
|
323
|
-
|
|
293
|
+
<div>
|
|
294
|
+
<button class="uk-button uk-button-default" type="button">Top Left</button>
|
|
295
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
296
|
+
</div>
|
|
324
297
|
|
|
325
298
|
</div>
|
|
326
|
-
<div>
|
|
299
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
|
|
327
300
|
|
|
328
|
-
<
|
|
329
|
-
<div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
301
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
|
|
330
302
|
|
|
331
|
-
|
|
332
|
-
|
|
303
|
+
<div>
|
|
304
|
+
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
|
|
305
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
306
|
+
</div>
|
|
333
307
|
|
|
334
|
-
|
|
335
|
-
|
|
308
|
+
<div>
|
|
309
|
+
<button class="uk-button uk-button-default" type="button">Left Center</button>
|
|
310
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
311
|
+
</div>
|
|
336
312
|
|
|
337
|
-
|
|
313
|
+
<div>
|
|
314
|
+
<button class="uk-button uk-button-default" type="button">Left Top</button>
|
|
315
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
316
|
+
</div>
|
|
338
317
|
|
|
339
|
-
|
|
340
|
-
<div>
|
|
318
|
+
</div>
|
|
341
319
|
|
|
342
|
-
|
|
343
|
-
<div>
|
|
320
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
|
|
344
321
|
|
|
345
|
-
|
|
346
|
-
|
|
322
|
+
<div>
|
|
323
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
324
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
325
|
+
</div>
|
|
347
326
|
|
|
348
|
-
|
|
349
|
-
|
|
327
|
+
<div>
|
|
328
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
329
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
330
|
+
</div>
|
|
350
331
|
|
|
351
|
-
|
|
352
|
-
|
|
332
|
+
<div>
|
|
333
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
334
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
</div>
|
|
353
338
|
|
|
354
339
|
</div>
|
|
355
|
-
<div>
|
|
340
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
356
341
|
|
|
357
|
-
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
358
|
-
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
359
342
|
|
|
360
|
-
|
|
361
|
-
|
|
343
|
+
<div>
|
|
344
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
345
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
<div>
|
|
349
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
350
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
351
|
+
</div>
|
|
362
352
|
|
|
363
|
-
<
|
|
364
|
-
|
|
353
|
+
<div>
|
|
354
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
355
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
356
|
+
</div>
|
|
365
357
|
|
|
366
358
|
</div>
|
|
359
|
+
|
|
367
360
|
</div>
|
|
368
361
|
|
|
369
362
|
</div>
|
|
370
|
-
<div
|
|
363
|
+
<div>
|
|
371
364
|
|
|
372
|
-
<
|
|
373
|
-
<div>
|
|
365
|
+
<p>Switched Position</p>
|
|
374
366
|
|
|
375
|
-
|
|
376
|
-
|
|
367
|
+
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
|
|
368
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
377
369
|
|
|
378
|
-
|
|
379
|
-
|
|
370
|
+
<div>
|
|
371
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
372
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
373
|
+
</div>
|
|
374
|
+
|
|
375
|
+
<div>
|
|
376
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
377
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
378
|
+
</div>
|
|
380
379
|
|
|
381
|
-
<
|
|
382
|
-
|
|
380
|
+
<div>
|
|
381
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
382
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
383
|
+
</div>
|
|
383
384
|
|
|
384
385
|
</div>
|
|
385
|
-
<div>
|
|
386
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
|
|
386
387
|
|
|
387
|
-
<
|
|
388
|
-
<div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
388
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
|
|
389
389
|
|
|
390
|
-
|
|
391
|
-
|
|
390
|
+
<div>
|
|
391
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
392
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
393
|
+
</div>
|
|
392
394
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
+
<div>
|
|
396
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
397
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
398
|
+
</div>
|
|
395
399
|
|
|
396
|
-
|
|
397
|
-
|
|
400
|
+
<div>
|
|
401
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
402
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
403
|
+
</div>
|
|
398
404
|
|
|
399
|
-
|
|
400
|
-
</div>
|
|
405
|
+
</div>
|
|
401
406
|
|
|
402
|
-
|
|
407
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
|
|
403
408
|
|
|
404
|
-
|
|
409
|
+
<div>
|
|
410
|
+
<button class="uk-button uk-button-default" type="button">Left Top</button>
|
|
411
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
412
|
+
</div>
|
|
405
413
|
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
<div uk-drop>
|
|
411
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
412
|
-
</div>
|
|
413
|
-
</div>
|
|
414
|
+
<div>
|
|
415
|
+
<button class="uk-button uk-button-default" type="button">Left Center</button>
|
|
416
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
417
|
+
</div>
|
|
414
418
|
|
|
415
|
-
|
|
419
|
+
<div>
|
|
420
|
+
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
|
|
421
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
422
|
+
</div>
|
|
416
423
|
|
|
417
|
-
|
|
424
|
+
</div>
|
|
418
425
|
|
|
419
|
-
|
|
426
|
+
</div>
|
|
427
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
420
428
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
429
|
+
<div>
|
|
430
|
+
<button class="uk-button uk-button-default" type="button">Top Left</button>
|
|
431
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
432
|
+
</div>
|
|
427
433
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
</div>
|
|
433
|
-
</div>
|
|
434
|
+
<div>
|
|
435
|
+
<button class="uk-button uk-button-default" type="button">Top Center</button>
|
|
436
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
437
|
+
</div>
|
|
434
438
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
439
|
+
<div>
|
|
440
|
+
<button class="uk-button uk-button-default" type="button">Top Right</button>
|
|
441
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
442
|
+
</div>
|
|
443
|
+
|
|
444
|
+
</div>
|
|
441
445
|
|
|
442
|
-
<div class="uk-inline">
|
|
443
|
-
<button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
|
|
444
|
-
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
445
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
446
446
|
</div>
|
|
447
|
+
|
|
447
448
|
</div>
|
|
449
|
+
<div>
|
|
448
450
|
|
|
449
|
-
|
|
451
|
+
<p>Switched Position and Alignment</p>
|
|
450
452
|
|
|
451
|
-
|
|
453
|
+
<div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
|
|
454
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
452
455
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
</div>
|
|
458
|
-
</div>
|
|
456
|
+
<div>
|
|
457
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
458
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
459
|
+
</div>
|
|
459
460
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
</div>
|
|
465
|
-
</div>
|
|
461
|
+
<div>
|
|
462
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
463
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
464
|
+
</div>
|
|
466
465
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
</div>
|
|
472
|
-
</div>
|
|
466
|
+
<div>
|
|
467
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
468
|
+
<div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
469
|
+
</div>
|
|
473
470
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
477
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
478
|
-
</div>
|
|
479
|
-
</div>
|
|
471
|
+
</div>
|
|
472
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
|
|
480
473
|
|
|
481
|
-
|
|
474
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
|
|
482
475
|
|
|
483
|
-
|
|
476
|
+
<div>
|
|
477
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
478
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
479
|
+
</div>
|
|
484
480
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
</div>
|
|
490
|
-
</div>
|
|
481
|
+
<div>
|
|
482
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
483
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
484
|
+
</div>
|
|
491
485
|
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
</div>
|
|
497
|
-
</div>
|
|
486
|
+
<div>
|
|
487
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
488
|
+
<div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
489
|
+
</div>
|
|
498
490
|
|
|
499
|
-
|
|
500
|
-
<button class="uk-button uk-button-default" type="button">Left Slide Left</button>
|
|
501
|
-
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
502
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
503
|
-
</div>
|
|
504
|
-
</div>
|
|
491
|
+
</div>
|
|
505
492
|
|
|
506
|
-
|
|
507
|
-
<button class="uk-button uk-button-default" type="button">Left Slide Right</button>
|
|
508
|
-
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
509
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
510
|
-
</div>
|
|
511
|
-
</div>
|
|
493
|
+
<div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
|
|
512
494
|
|
|
513
|
-
|
|
495
|
+
<div>
|
|
496
|
+
<button class="uk-button uk-button-default" type="button">Left Bottom</button>
|
|
497
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
498
|
+
</div>
|
|
514
499
|
|
|
515
|
-
|
|
500
|
+
<div>
|
|
501
|
+
<button class="uk-button uk-button-default" type="button">Left Center</button>
|
|
502
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
503
|
+
</div>
|
|
516
504
|
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
</div>
|
|
522
|
-
</div>
|
|
505
|
+
<div>
|
|
506
|
+
<button class="uk-button uk-button-default" type="button">Left Top</button>
|
|
507
|
+
<div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
508
|
+
</div>
|
|
523
509
|
|
|
524
|
-
|
|
525
|
-
<button class="uk-button uk-button-default" type="button">Right Slide</button>
|
|
526
|
-
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
|
|
527
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
528
|
-
</div>
|
|
529
|
-
</div>
|
|
510
|
+
</div>
|
|
530
511
|
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
534
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
535
|
-
</div>
|
|
536
|
-
</div>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="uk-flex uk-flex-between uk-flex-wrap gap">
|
|
537
514
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
515
|
+
<div>
|
|
516
|
+
<button class="uk-button uk-button-default" type="button">Top Right</button>
|
|
517
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
518
|
+
</div>
|
|
519
|
+
|
|
520
|
+
<div>
|
|
521
|
+
<button class="uk-button uk-button-default" type="button">Top Center</button>
|
|
522
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
523
|
+
</div>
|
|
524
|
+
|
|
525
|
+
<div>
|
|
526
|
+
<button class="uk-button uk-button-default" type="button">Top Left</button>
|
|
527
|
+
<div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
528
|
+
</div>
|
|
529
|
+
|
|
530
|
+
</div>
|
|
542
531
|
</div>
|
|
532
|
+
|
|
543
533
|
</div>
|
|
534
|
+
</div>
|
|
535
|
+
|
|
536
|
+
<h2>Shift and Flip</h2>
|
|
544
537
|
|
|
538
|
+
<div class="uk-margin">
|
|
539
|
+
<select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
|
|
540
|
+
<option value="">Resize</option>
|
|
541
|
+
<option value="test-boundary-overflow">Scroll</option>
|
|
542
|
+
</select>
|
|
545
543
|
</div>
|
|
546
544
|
|
|
547
|
-
<div
|
|
548
|
-
<div>
|
|
549
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
545
|
+
<div uk-grid>
|
|
546
|
+
<div class="uk-width-1-2@m">
|
|
550
547
|
|
|
551
|
-
|
|
552
|
-
<div
|
|
553
|
-
<div
|
|
554
|
-
</div>
|
|
548
|
+
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
|
|
549
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
550
|
+
<div>
|
|
555
551
|
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
<div>
|
|
559
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
552
|
+
<button class="uk-button uk-button-default" type="button">Shift</button>
|
|
553
|
+
<div class="uk-dropdown uk-width-medium" uk-drop="pos: bottom-left; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
560
554
|
|
|
561
|
-
|
|
562
|
-
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
563
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
555
|
+
</div>
|
|
564
556
|
</div>
|
|
565
|
-
|
|
566
557
|
</div>
|
|
558
|
+
|
|
567
559
|
</div>
|
|
568
|
-
<div>
|
|
569
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
560
|
+
<div class="uk-width-1-2@m">
|
|
570
561
|
|
|
571
|
-
|
|
572
|
-
<div
|
|
573
|
-
<div
|
|
574
|
-
</div>
|
|
562
|
+
<div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
|
|
563
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
564
|
+
<div>
|
|
575
565
|
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
<div>
|
|
579
|
-
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
566
|
+
<button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Flip</button>
|
|
567
|
+
<div class="uk-dropdown uk-width-small" uk-drop="pos: right-top; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
580
568
|
|
|
581
|
-
|
|
582
|
-
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
583
|
-
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
569
|
+
</div>
|
|
584
570
|
</div>
|
|
585
|
-
|
|
586
571
|
</div>
|
|
572
|
+
|
|
587
573
|
</div>
|
|
588
574
|
</div>
|
|
589
575
|
|
|
@@ -602,9 +588,9 @@
|
|
|
602
588
|
<tbody>
|
|
603
589
|
<tr>
|
|
604
590
|
<td><code>toggle</code></td>
|
|
605
|
-
<td>
|
|
591
|
+
<td>CSS Selector</td>
|
|
606
592
|
<td>'- *'</td>
|
|
607
|
-
<td>CSS selector for the element to be used as toggle. By default, the preceding element
|
|
593
|
+
<td>CSS selector for the element to be used as toggle. By default, the preceding element.</td>
|
|
608
594
|
</tr>
|
|
609
595
|
<tr>
|
|
610
596
|
<td><code>pos</code></td>
|
|
@@ -612,65 +598,95 @@
|
|
|
612
598
|
<td>'bottom-left'</td>
|
|
613
599
|
<td>Drop position.</td>
|
|
614
600
|
</tr>
|
|
601
|
+
<tr>
|
|
602
|
+
<td><code>stretch</code></td>
|
|
603
|
+
<td>false|true|'x'|'y'</td>
|
|
604
|
+
<td>true</td>
|
|
605
|
+
<td>Stretch drop on both (true) or given axis.</td>
|
|
606
|
+
</tr>
|
|
615
607
|
<tr>
|
|
616
608
|
<td><code>mode</code></td>
|
|
617
609
|
<td>hover | click</td>
|
|
618
610
|
<td>click,hover</td>
|
|
619
|
-
<td>Comma
|
|
611
|
+
<td>Comma-separated list of drop trigger behavior modes.</td>
|
|
620
612
|
</tr>
|
|
621
613
|
<tr>
|
|
622
614
|
<td><code>delay-show</code></td>
|
|
623
615
|
<td>Number</td>
|
|
624
616
|
<td>0</td>
|
|
625
|
-
<td>Delay time in hover mode before a
|
|
617
|
+
<td>Delay time in hover mode before a drop is shown in ms.</td>
|
|
626
618
|
</tr>
|
|
627
619
|
<tr>
|
|
628
620
|
<td><code>delay-hide</code></td>
|
|
629
621
|
<td>Number</td>
|
|
630
622
|
<td>800</td>
|
|
631
|
-
<td>Delay time in hover mode before a
|
|
623
|
+
<td>Delay time in hover mode before a drop is hidden in ms.</td>
|
|
632
624
|
</tr>
|
|
633
625
|
<tr>
|
|
634
|
-
<td><code>
|
|
635
|
-
<td
|
|
636
|
-
<td
|
|
637
|
-
<td>Disable dynamic positioning while scrolling by setting this option to `
|
|
626
|
+
<td><code>auto-update</code></td>
|
|
627
|
+
<td>Boolean</td>
|
|
628
|
+
<td>true</td>
|
|
629
|
+
<td>Disable dynamic positioning while scrolling by setting this option to `false`.</td>
|
|
638
630
|
</tr>
|
|
639
631
|
<tr>
|
|
640
632
|
<td><code>boundary</code></td>
|
|
641
633
|
<td>CSS selector</td>
|
|
642
|
-
<td>
|
|
643
|
-
<td>The area
|
|
634
|
+
<td>false</td>
|
|
635
|
+
<td>The area the drop can't exceed causing it to flip and shift. By default, the nearest scrolling ancestor.</td>
|
|
636
|
+
</tr>
|
|
637
|
+
<tr>
|
|
638
|
+
<td><code>target</code></td>
|
|
639
|
+
<td>Boolean, CSS selector</td>
|
|
640
|
+
<td>false</td>
|
|
641
|
+
<td>The element the drop is positioned to (`true` for window).</td>
|
|
642
|
+
</tr>
|
|
643
|
+
<tr>
|
|
644
|
+
<td><code>target-x</code></td>
|
|
645
|
+
<td>Boolean, CSS selector</td>
|
|
646
|
+
<td>false</td>
|
|
647
|
+
<td>The element's X axis the drop is positioned to (`true` for window).</td>
|
|
648
|
+
</tr>
|
|
649
|
+
<tr>
|
|
650
|
+
<td><code>target-y</code></td>
|
|
651
|
+
<td>Boolean, CSS selector</td>
|
|
652
|
+
<td>false</td>
|
|
653
|
+
<td>The element's Y axis the drop is positioned to (`true` for window).</td>
|
|
644
654
|
</tr>
|
|
645
655
|
<tr>
|
|
646
|
-
<td><code>
|
|
656
|
+
<td><code>inset</code></td>
|
|
647
657
|
<td>Boolean</td>
|
|
648
658
|
<td>false</td>
|
|
649
|
-
<td>
|
|
659
|
+
<td>Position inside its target.</td>
|
|
650
660
|
</tr>
|
|
651
661
|
<tr>
|
|
652
662
|
<td><code>flip</code></td>
|
|
653
|
-
<td>
|
|
663
|
+
<td>Boolean</td>
|
|
664
|
+
<td>true</td>
|
|
665
|
+
<td>Flips the Drop along the main axis if it overflows the boundary.</td>
|
|
666
|
+
</tr>
|
|
667
|
+
<tr>
|
|
668
|
+
<td><code>shift</code></td>
|
|
669
|
+
<td>Boolean</td>
|
|
654
670
|
<td>true</td>
|
|
655
|
-
<td>
|
|
671
|
+
<td>Shifts the Drop along the cross axis if it overflows the boundary.</td>
|
|
656
672
|
</tr>
|
|
657
673
|
<tr>
|
|
658
674
|
<td><code>offset</code></td>
|
|
659
675
|
<td>Number</td>
|
|
660
676
|
<td>0</td>
|
|
661
|
-
<td>The offset
|
|
677
|
+
<td>The drop offset.</td>
|
|
662
678
|
</tr>
|
|
663
679
|
<tr>
|
|
664
680
|
<td><code>animation</code></td>
|
|
665
681
|
<td>String</td>
|
|
666
682
|
<td>'uk-animation-fade'</td>
|
|
667
|
-
<td>
|
|
683
|
+
<td>Space-separated names of animations. Comma-separated for animation out.</td>
|
|
668
684
|
</tr>
|
|
669
685
|
<tr>
|
|
670
686
|
<td><code>animate-out</code></td>
|
|
671
687
|
<td>Boolean</td>
|
|
672
688
|
<td>false</td>
|
|
673
|
-
<td>Use animation when closing the
|
|
689
|
+
<td>Use animation when closing the drop.</td>
|
|
674
690
|
</tr>
|
|
675
691
|
<tr>
|
|
676
692
|
<td><code>bg-scroll</code></td>
|
|
@@ -698,16 +714,30 @@
|
|
|
698
714
|
|
|
699
715
|
<script>
|
|
700
716
|
|
|
701
|
-
|
|
717
|
+
const {$$, addClass, attr, css, on, removeClass } = UIkit.util;
|
|
718
|
+
|
|
719
|
+
on('#js-style-switcher', 'change', (e) => {
|
|
720
|
+
const options = $$('option', e.target).map(({value}) => value);
|
|
721
|
+
for (const el of $$('.uk-drop')) {
|
|
722
|
+
removeClass(el, options);
|
|
723
|
+
addClass(el, e.target.value);
|
|
724
|
+
}
|
|
725
|
+
});
|
|
702
726
|
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
}
|
|
727
|
+
on('#js-boundary-overflow-switcher', 'change', (e) => {
|
|
728
|
+
const options = $$('option', e.target).map(({value}) => value);
|
|
729
|
+
for (const el of $$('.js-boundary-overflow')) {
|
|
730
|
+
removeClass(el, options);
|
|
731
|
+
addClass(el, e.target.value);
|
|
732
|
+
}
|
|
709
733
|
});
|
|
710
734
|
|
|
735
|
+
for (const option of ['boundary', 'target-x', 'target-y', 'inset', 'stretch', 'animation', 'animate-out', 'duration']) {
|
|
736
|
+
on(`#js-${option}-switcher`, 'change', (e) =>
|
|
737
|
+
attr($$('.js-options'), option, e.target.value)
|
|
738
|
+
);
|
|
739
|
+
}
|
|
740
|
+
|
|
711
741
|
</script>
|
|
712
742
|
|
|
713
743
|
</body>
|