uikit 3.11.2-dev.72dbb9a19 → 3.11.2-dev.76734f785

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.
Files changed (114) hide show
  1. package/CHANGELOG.md +39 -19
  2. package/dist/css/uikit-core-rtl.css +86 -170
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +86 -170
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +88 -176
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +88 -176
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +115 -78
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +115 -78
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +79 -33
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +115 -78
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +45 -3
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +259 -234
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +461 -347
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/internal/slider-preload.js +37 -0
  44. package/src/js/components/slider.js +43 -34
  45. package/src/js/components/slideshow.js +8 -1
  46. package/src/js/core/height-viewport.js +3 -0
  47. package/src/js/core/icon.js +13 -6
  48. package/src/js/core/img.js +131 -114
  49. package/src/js/core/sticky.js +51 -57
  50. package/src/js/core/svg.js +10 -6
  51. package/src/js/core/toggle.js +2 -1
  52. package/src/js/mixin/parallax.js +116 -79
  53. package/src/js/util/ajax.js +6 -2
  54. package/src/js/util/dimensions.js +4 -4
  55. package/src/js/util/dom.js +37 -31
  56. package/src/js/util/lang.js +6 -5
  57. package/src/js/util/player.js +3 -2
  58. package/src/js/util/style.js +4 -4
  59. package/src/less/components/base.less +10 -28
  60. package/src/less/components/form-range.less +48 -95
  61. package/src/less/components/form.less +0 -1
  62. package/src/less/components/height.less +3 -0
  63. package/src/less/components/lightbox.less +0 -1
  64. package/src/less/components/modal.less +3 -7
  65. package/src/less/components/progress.less +14 -36
  66. package/src/less/components/slider.less +0 -3
  67. package/src/less/components/slideshow.less +0 -3
  68. package/src/less/components/text.less +16 -32
  69. package/src/scss/components/base.scss +10 -28
  70. package/src/scss/components/form-range.scss +48 -95
  71. package/src/scss/components/form.scss +0 -1
  72. package/src/scss/components/height.scss +3 -0
  73. package/src/scss/components/lightbox.scss +0 -1
  74. package/src/scss/components/modal.scss +3 -7
  75. package/src/scss/components/progress.scss +14 -36
  76. package/src/scss/components/slider.scss +0 -3
  77. package/src/scss/components/slideshow.scss +0 -3
  78. package/src/scss/components/text.scss +16 -32
  79. package/src/scss/mixins-theme.scss +1 -1
  80. package/src/scss/mixins.scss +1 -1
  81. package/src/scss/variables-theme.scss +3 -3
  82. package/src/scss/variables.scss +3 -3
  83. package/tests/align.html +10 -10
  84. package/tests/animation.html +2 -2
  85. package/tests/article.html +2 -2
  86. package/tests/base.html +3 -3
  87. package/tests/card.html +10 -10
  88. package/tests/column.html +3 -3
  89. package/tests/comment.html +9 -9
  90. package/tests/dotnav.html +3 -3
  91. package/tests/image.html +296 -64
  92. package/tests/images/image-type.avif +0 -0
  93. package/tests/images/image-type.jpeg +0 -0
  94. package/tests/images/image-type.webp +0 -0
  95. package/tests/index.html +8 -8
  96. package/tests/lightbox.html +10 -10
  97. package/tests/marker.html +2 -2
  98. package/tests/modal.html +8 -9
  99. package/tests/navbar.html +2 -2
  100. package/tests/overlay.html +7 -7
  101. package/tests/parallax.html +16 -7
  102. package/tests/position.html +12 -12
  103. package/tests/slidenav.html +12 -12
  104. package/tests/slider.html +20 -20
  105. package/tests/sortable.html +1 -1
  106. package/tests/sticky-parallax.html +56 -71
  107. package/tests/svg.html +6 -6
  108. package/tests/table.html +11 -11
  109. package/tests/thumbnav.html +12 -12
  110. package/tests/transition.html +30 -30
  111. package/tests/utility.html +33 -33
  112. package/tests/video.html +1 -1
  113. package/tests/width.html +1 -1
  114. package/tests/images/animated.gif +0 -0
package/tests/image.html CHANGED
@@ -14,21 +14,292 @@
14
14
 
15
15
  <h1>Image</h1>
16
16
 
17
- <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
17
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
18
+ <h1>Background Image Loading Eager</h1>
19
+ </div>
20
+
21
+ <h2>Loading Lazy Attribute</h2>
18
22
 
19
23
  <div class="uk-child-width-1-2@m" uk-grid>
20
24
  <div>
21
- <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
25
+ <img src="https://images.unsplash.com/photo-1476820865390-c52aeebb9891?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" loading="lazy">
26
+ <p class="uk-margin-small-top">Image</p>
27
+ </div>
28
+ <div>
29
+ <picture>
30
+ <source srcset="https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=580&h=386&q=80 580w,
31
+ https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=900&h=600&q=80 900w"
32
+ media="(min-width: 1200px)">
33
+ <img src="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80"
34
+ srcset="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=580&h=386&q=80 580w,
35
+ https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80 900w"
36
+ sizes="(min-width: 960px) 580px, 100vw"
37
+ width="900" height="600" alt="" loading="lazy">
38
+ </picture>
39
+ <p class="uk-margin-small-top">Picture with Srcset</p>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
44
+ <div>
45
+ <img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
46
+ srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
47
+ https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=746&h=498&q=80 746w"
48
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
49
+ width="746" height="498" alt="" loading="lazy">
50
+ </div>
51
+ <div>
52
+ <img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
53
+ srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
54
+ https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
55
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
56
+ width="746" height="498" alt="" loading="lazy">
57
+ </div>
58
+ <div>
59
+ <img src="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80"
60
+ srcset="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80 373w,
61
+ https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=746&h=498&q=80 746w"
62
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
63
+ width="746" height="498" alt="" loading="lazy">
64
+ </div>
65
+ <div>
66
+ <img src="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80"
67
+ srcset="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80 373w,
68
+ https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=746&h=498&q=80 746w"
69
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
70
+ width="746" height="498" alt="" loading="lazy">
71
+ </div>
72
+ <div>
73
+ <img src="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80"
74
+ srcset="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80 373w,
75
+ https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=746&h=498&q=80 746w"
76
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
77
+ width="746" height="498" alt="" loading="lazy">
78
+ </div>
79
+ <div>
80
+ <img src="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80"
81
+ srcset="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80 373w,
82
+ https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=746&h=498&q=80 746w"
83
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
84
+ width="746" height="498" alt="" loading="lazy">
85
+ </div>
86
+ <div>
87
+ <img src="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80"
88
+ srcset="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80 373w,
89
+ https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=746&h=498&q=80 746w"
90
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
91
+ width="746" height="498" alt="" loading="lazy">
92
+ </div>
93
+ <div>
94
+ <img src="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80"
95
+ srcset="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80 373w,
96
+ https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=746&h=498&q=80 746w"
97
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
98
+ width="746" height="498" alt="" loading="lazy">
99
+ </div>
100
+ <div>
101
+ <img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80"
102
+ srcset="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80 373w,
103
+ https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=746&h=498&q=80 746w"
104
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
105
+ width="746" height="498" alt="" loading="lazy">
106
+ </div>
107
+ <div>
108
+ <img src="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80"
109
+ srcset="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80 373w,
110
+ https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=746&h=498&q=80 746w"
111
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
112
+ width="746" height="498" alt="" loading="lazy">
113
+ </div>
114
+ <div>
115
+ <img src="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80"
116
+ srcset="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80 373w,
117
+ https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=746&h=498&q=80 746w"
118
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
119
+ width="746" height="498" alt="" loading="lazy">
120
+ </div>
121
+ <div>
122
+ <img src="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80"
123
+ srcset="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80 373w,
124
+ https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=746&h=498&q=80 746w"
125
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
126
+ width="746" height="498" alt="" loading="lazy">
127
+ </div>
128
+ <div>
129
+ <img src="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80"
130
+ srcset="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80 373w,
131
+ https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=746&h=498&q=80 746w"
132
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
133
+ width="746" height="498" alt="" loading="lazy">
134
+ </div>
135
+ <div>
136
+ <img src="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80"
137
+ srcset="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80 373w,
138
+ https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=746&h=498&q=80 746w"
139
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
140
+ width="746" height="498" alt="" loading="lazy">
141
+ </div>
142
+ <div>
143
+ <img src="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80"
144
+ srcset="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80 373w,
145
+ https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=746&h=498&q=80 746w"
146
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
147
+ width="746" height="498" alt="" loading="lazy">
148
+ </div>
149
+ <div>
150
+ <img src="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80"
151
+ srcset="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80 373w,
152
+ https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=746&h=498&q=80 746w"
153
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
154
+ width="746" height="498" alt="" loading="lazy">
155
+ </div>
156
+ <div>
157
+ <img src="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80"
158
+ srcset="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80 373w,
159
+ https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=746&h=498&q=80 746w"
160
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
161
+ width="746" height="498" alt="" loading="lazy">
162
+ </div>
163
+ <div>
164
+ <img src="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80"
165
+ srcset="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80 373w,
166
+ https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=746&h=498&q=80 746w"
167
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
168
+ width="746" height="498" alt="" loading="lazy">
169
+ </div>
170
+ <div>
171
+ <img src="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80"
172
+ srcset="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80 373w,
173
+ https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=746&h=498&q=80 746w"
174
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
175
+ width="746" height="498" alt="" loading="lazy">
176
+ </div>
177
+ <div>
178
+ <img src="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80"
179
+ srcset="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80 373w,
180
+ https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=746&h=498&q=80 746w"
181
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
182
+ width="746" height="498" alt="" loading="lazy">
183
+ </div>
184
+ <div>
185
+ <img src="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80"
186
+ srcset="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80 373w,
187
+ https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=746&h=498&q=80 746w"
188
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
189
+ width="746" height="498" alt="" loading="lazy">
190
+ </div>
191
+ <div>
192
+ <img src="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80"
193
+ srcset="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80 373w,
194
+ https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=746&h=498&q=80 746w"
195
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
196
+ width="746" height="498" alt="" loading="lazy">
197
+ </div>
198
+ <div>
199
+ <img src="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80"
200
+ srcset="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80 373w,
201
+ https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=746&h=498&q=80 746w"
202
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
203
+ width="746" height="498" alt="" loading="lazy">
204
+ </div>
205
+ <div>
206
+ <img src="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80"
207
+ srcset="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80 373w,
208
+ https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=746&h=498&q=80 746w"
209
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
210
+ width="746" height="498" alt="" loading="lazy">
22
211
  </div>
23
212
  <div>
24
- <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
213
+ <img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80"
214
+ srcset="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80 373w,
215
+ https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=746&h=498&q=80 746w"
216
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
217
+ width="746" height="498" alt="" loading="lazy">
218
+ </div>
219
+ <div>
220
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80"
221
+ srcset="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80 373w,
222
+ https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=746&h=498&q=80 746w"
223
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
224
+ width="746" height="498" alt="" loading="lazy">
225
+ </div>
226
+ <div>
227
+ <img src="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80"
228
+ srcset="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80 373w,
229
+ https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=746&h=498&q=80 746w"
230
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
231
+ width="746" height="498" alt="" loading="lazy">
25
232
  </div>
26
233
  </div>
27
234
 
235
+ <h2>Background Image</h2>
236
+
28
237
  <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
29
238
  <h1>Background Image</h1>
30
239
  </div>
31
240
 
241
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
242
+ data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
243
+ data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
244
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
245
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
246
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
247
+ <h1>Background Image with Srcset</h1>
248
+ </div>
249
+
250
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
251
+ sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80; media: (min-width: 1200px)"
252
+ data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=1200&h=450&q=8"
253
+ uk-img>
254
+ <h1>Background Picture</h1>
255
+ </div>
256
+
257
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
258
+ sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
259
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
260
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w; media: (min-width: 1200px)"
261
+ data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80"
262
+ data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=800&h=300&q=80 800w,
263
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80 1200w,
264
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=2400&h=900&q=80 2400w"
265
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
266
+ <h1>Background Picture with Srcset</h1>
267
+ </div>
268
+
269
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
270
+ sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
271
+ &quot;type&quot;: &quot;image\/avif&quot;
272
+ },
273
+ {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
274
+ &quot;type&quot;: &quot;image\/webp&quot;
275
+ }]"
276
+ data-src="images/image-type.jpg"
277
+ uk-img>
278
+ <h1>Background Picture with Multiple Sources</h1>
279
+ </div>
280
+
281
+ <h2>uk-img with Image element (Deprecated)</h2>
282
+
283
+ <div class="uk-child-width-1-2@m" uk-grid>
284
+ <div>
285
+ <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
286
+ <p class="uk-margin-small-top">Image</p>
287
+ </div>
288
+ <div>
289
+ <picture>
290
+ <source data-srcset="https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=580&h=386&q=80 580w,
291
+ https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=900&h=600&q=80 900w"
292
+ media="(min-width: 1200px)">
293
+ <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80"
294
+ data-srcset="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=580&h=386&q=80 580w,
295
+ https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80 900w"
296
+ sizes="(min-width: 960px) 580px, 100vw"
297
+ width="900" height="600" alt="" uk-img>
298
+ </picture>
299
+ <p class="uk-margin-small-top">Picture with Srcset</p>
300
+ </div>
301
+ </div>
302
+
32
303
  <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
33
304
  <div>
34
305
  <img data-src="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80"
@@ -220,34 +491,7 @@
220
491
  width="746" height="498" alt="" uk-img>
221
492
  </div>
222
493
  </div>
223
-
224
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
225
- data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
226
- data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
227
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
228
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
229
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
230
- <h1>Background Image</h1>
231
- </div>
232
-
233
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
234
- data-src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80"
235
- data-srcset="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=800&h=300&q=80 800w,
236
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80 1200w,
237
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=2400&h=900&q=80 2400w"
238
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
239
- <h1>Background Image</h1>
240
- </div>
241
-
242
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
243
- data-src="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80"
244
- data-srcset="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
245
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
246
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w"
247
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
248
- <h1>Background Image</h1>
249
- </div>
250
-
494
+
251
495
  <div class="uk-child-width-1-2@m" uk-grid>
252
496
  <div>
253
497
 
@@ -255,28 +499,28 @@
255
499
 
256
500
  <ul class="uk-slideshow-items">
257
501
  <li>
258
- <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
502
+ <img data-src="images/photo.jpg" alt="" uk-cover uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
259
503
  <div class="uk-position-center uk-position-small uk-text-center">
260
504
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
261
505
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
262
506
  </div>
263
507
  </li>
264
508
  <li>
265
- <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
509
+ <img data-src="images/dark.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
266
510
  <div class="uk-position-center uk-position-small uk-text-center">
267
511
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
268
512
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
269
513
  </div>
270
514
  </li>
271
515
  <li>
272
- <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
516
+ <img data-src="images/light.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
273
517
  <div class="uk-position-center uk-position-small uk-text-center">
274
518
  <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
275
519
  <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
276
520
  </div>
277
521
  </li>
278
522
  <li>
279
- <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
523
+ <img data-src="images/photo2.jpg" alt="" uk-cover uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
280
524
  <div class="uk-position-center uk-position-small uk-text-center">
281
525
  <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
282
526
  <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +540,43 @@
296
540
 
297
541
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
298
542
  <li>
299
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
543
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
300
544
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
301
545
  </li>
302
546
  <li>
303
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
547
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
304
548
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
305
549
  </li>
306
550
  <li>
307
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
551
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
308
552
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
309
553
  </li>
310
554
  <li>
311
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
555
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
312
556
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
313
557
  </li>
314
558
  <li>
315
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
559
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
316
560
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
317
561
  </li>
318
562
  <li>
319
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
563
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
320
564
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
321
565
  </li>
322
566
  <li>
323
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
567
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
324
568
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
325
569
  </li>
326
570
  <li>
327
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
571
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
328
572
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
329
573
  </li>
330
574
  <li>
331
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
575
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
332
576
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
333
577
  </li>
334
578
  <li>
335
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
579
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
336
580
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
337
581
  </li>
338
582
  </ul>
@@ -365,28 +609,16 @@
365
609
  <td>The image's `src` attribute.</td>
366
610
  </tr>
367
611
  <tr>
368
- <td><code>dataSrcset</code></td>
369
- <td>String</td>
370
- <td>false</td>
371
- <td>The image's `srcset` attribute.</td>
372
- </tr>
373
- <tr>
374
- <td><code>sizes</code></td>
375
- <td>String</td>
376
- <td>false</td>
377
- <td>The image's `sizes` attribute.</td>
378
- </tr>
379
- <tr>
380
- <td><code>width</code></td>
612
+ <td><code>sources</code></td>
381
613
  <td>String</td>
382
- <td>false</td>
383
- <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
614
+ <td>''</td>
615
+ <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
384
616
  </tr>
385
617
  <tr>
386
- <td><code>height</code></td>
387
- <td>String</td>
388
- <td>false</td>
389
- <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
618
+ <td><code>loading</code></td>
619
+ <td>`lazy`|`eager`</td>
620
+ <td>`lazy`</td>
621
+ <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
390
622
  </tr>
391
623
  <tr>
392
624
  <td><code>offsetTop</code></td>
package/tests/images/image-type.avif ADDED
Binary file
package/tests/images/image-type.jpeg ADDED
Binary file
package/tests/images/image-type.webp ADDED
Binary file
package/tests/index.html CHANGED
@@ -195,7 +195,7 @@
195
195
  <header class="uk-comment-header uk-position-relative">
196
196
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
197
197
  <div class="uk-width-auto">
198
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
198
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
199
199
  </div>
200
200
  <div class="uk-width-expand">
201
201
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -470,7 +470,7 @@
470
470
  <div>
471
471
 
472
472
  <div class="uk-inline">
473
- <img src="images/light.jpg" alt="">
473
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
474
474
  <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
475
475
  <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
476
476
  <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
@@ -480,7 +480,7 @@
480
480
  <div>
481
481
 
482
482
  <div class="uk-inline-clip">
483
- <img src="images/photo.jpg" alt="">
483
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
484
484
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
485
485
  <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
486
486
  </div>
@@ -490,7 +490,7 @@
490
490
  <div>
491
491
 
492
492
  <div class="uk-inline-clip">
493
- <img src="images/photo.jpg" alt="">
493
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
494
494
  <div class="uk-overlay uk-overlay-primary uk-position-bottom">
495
495
  <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
496
496
  </div>
@@ -500,7 +500,7 @@
500
500
  <div>
501
501
 
502
502
  <div class="uk-inline uk-light">
503
- <img src="images/photo.jpg" alt="">
503
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
504
504
  <div class="uk-position-center">
505
505
  <span uk-overlay-icon></span>
506
506
  </div>
@@ -533,9 +533,9 @@
533
533
  <div>
534
534
 
535
535
  <ul class="uk-thumbnav">
536
- <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" alt=""></a></li>
537
- <li><a href="#"><img src="images/dark.jpg" width="60" alt=""></a></li>
538
- <li><a href="#"><img src="images/light.jpg" width="60" alt=""></a></li>
536
+ <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" height="40" alt=""></a></li>
537
+ <li><a href="#"><img src="images/dark.jpg" width="60" height="40" alt=""></a></li>
538
+ <li><a href="#"><img src="images/light.jpg" width="60" height="40" alt=""></a></li>
539
539
  </ul>
540
540
 
541
541
  </div>