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