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