@rio-cloud/uikit-mcp 1.1.7 → 1.1.9
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/README.md +24 -18
- package/dist/doc-metadata.json +125 -295
- package/dist/docs/components/accentBar.md +16 -69
- package/dist/docs/components/activity.md +7 -44
- package/dist/docs/components/animatedNumber.md +3 -11
- package/dist/docs/components/animatedTextReveal.md +6 -34
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +40 -193
- package/dist/docs/components/appNavigationBar.md +1 -24
- package/dist/docs/components/areaCharts.md +7 -22
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
- package/dist/docs/components/assetTree.md +241 -280
- package/dist/docs/components/autosuggests.md +3 -102
- package/dist/docs/components/avatar.md +1 -16
- package/dist/docs/components/banner.md +4 -37
- package/dist/docs/components/barCharts.md +20 -75
- package/dist/docs/components/barList.md +10 -78
- package/dist/docs/components/basicMap.md +1 -67
- package/dist/docs/components/bottomSheet.md +2 -28
- package/dist/docs/components/button.md +12 -65
- package/dist/docs/components/buttonToolbar.md +5 -19
- package/dist/docs/components/calendarStripe.md +50 -100
- package/dist/docs/components/card.md +1 -9
- package/dist/docs/components/carousel.md +1 -14
- package/dist/docs/components/chartColors.md +1 -156
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -81
- package/dist/docs/components/checkbox.md +11 -72
- package/dist/docs/components/circularProgress.md +8 -49
- package/dist/docs/components/clearableInput.md +3 -62
- package/dist/docs/components/collapse.md +2 -15
- package/dist/docs/components/composedCharts.md +16 -26
- package/dist/docs/components/contentLoader.md +7 -25
- package/dist/docs/components/dataTabs.md +16 -104
- package/dist/docs/components/datepickers.md +710 -962
- package/dist/docs/components/dialogs.md +5 -67
- package/dist/docs/components/divider.md +1 -33
- package/dist/docs/components/dropdowns.md +3424 -5567
- package/dist/docs/components/editableContent.md +4 -82
- package/dist/docs/components/expander.md +15 -88
- package/dist/docs/components/fade.md +4 -61
- package/dist/docs/components/fadeExpander.md +1 -7
- package/dist/docs/components/fadeUp.md +2 -76
- package/dist/docs/components/feedback.md +9 -68
- package/dist/docs/components/filePickers.md +4 -18
- package/dist/docs/components/formLabel.md +7 -27
- package/dist/docs/components/groupedItemList.md +2 -158
- package/dist/docs/components/iconList.md +7 -64
- package/dist/docs/components/imagePreloader.md +1 -9
- package/dist/docs/components/labeledElement.md +3 -18
- package/dist/docs/components/licensePlate.md +1 -43
- package/dist/docs/components/lineCharts.md +8 -39
- package/dist/docs/components/listMenu.md +2 -34
- package/dist/docs/components/loadMore.md +5 -24
- package/dist/docs/components/mainNavigation.md +1 -9
- package/dist/docs/components/mapCircle.md +1 -23
- package/dist/docs/components/mapCluster.md +2 -54
- package/dist/docs/components/mapContext.md +1 -23
- package/dist/docs/components/mapDraggableMarker.md +2 -28
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +1 -27
- package/dist/docs/components/mapLayerGroup.md +1 -23
- package/dist/docs/components/mapMarker.md +1 -99
- package/dist/docs/components/mapPolygon.md +2 -116
- package/dist/docs/components/mapRoute.md +6 -1465
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -128
- package/dist/docs/components/mapUtils.md +10 -113
- package/dist/docs/components/multiselects.md +14 -163
- package/dist/docs/components/noData.md +8 -22
- package/dist/docs/components/notifications.md +3 -19
- package/dist/docs/components/numbercontrol.md +3 -47
- package/dist/docs/components/onboarding.md +3 -15
- package/dist/docs/components/page.md +1 -33
- package/dist/docs/components/pager.md +1 -17
- package/dist/docs/components/pieCharts.md +40 -71
- package/dist/docs/components/popover.md +1 -12
- package/dist/docs/components/position.md +2 -6
- package/dist/docs/components/radialBarCharts.md +32 -116
- package/dist/docs/components/radioCardGroup.md +6 -48
- package/dist/docs/components/radiobutton.md +6 -75
- package/dist/docs/components/releaseNotes.md +3 -21
- package/dist/docs/components/resizer.md +1 -7
- package/dist/docs/components/responsiveColumnStripe.md +9 -49
- package/dist/docs/components/responsiveVideo.md +1 -7
- package/dist/docs/components/rioglyph.md +1 -17
- package/dist/docs/components/rules.md +7 -70
- package/dist/docs/components/saveableInput.md +267 -401
- package/dist/docs/components/selects.md +27 -1164
- package/dist/docs/components/sidebar.md +6 -17
- package/dist/docs/components/sliders.md +1 -27
- package/dist/docs/components/smoothScrollbars.md +1 -73
- package/dist/docs/components/spinners.md +6 -51
- package/dist/docs/components/states.md +6 -92
- package/dist/docs/components/statsWidgets.md +1 -76
- package/dist/docs/components/statusBar.md +1 -57
- package/dist/docs/components/stepButton.md +2 -7
- package/dist/docs/components/steppedProgressBars.md +5 -62
- package/dist/docs/components/subNavigation.md +1 -31
- package/dist/docs/components/supportMarker.md +2 -14
- package/dist/docs/components/svgImage.md +1 -5
- package/dist/docs/components/switch.md +2 -33
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -41
- package/dist/docs/components/tags.md +1 -138
- package/dist/docs/components/teaser.md +2 -122
- package/dist/docs/components/textTruncateMiddle.md +2 -9
- package/dist/docs/components/timeline.md +1 -99
- package/dist/docs/components/timepicker.md +4 -79
- package/dist/docs/components/toggleButton.md +2 -15
- package/dist/docs/components/tooltip.md +9 -30
- package/dist/docs/components/tracker.md +2 -19
- package/dist/docs/components/virtualList.md +61 -130
- package/dist/docs/foundations.md +749 -4069
- package/dist/docs/start/changelog.md +5 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +149 -483
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +4 -16
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +13 -67
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +11 -11
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/utilities/classNames.md +3 -18
- package/dist/docs/utilities/deviceUtils.md +7 -13
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +2 -12
- package/dist/docs/utilities/routeUtils.md +25 -343
- package/dist/docs/utilities/useAfterMount.md +1 -6
- package/dist/docs/utilities/useAutoAnimate.md +2 -15
- package/dist/docs/utilities/useAverage.md +1 -6
- package/dist/docs/utilities/useClickOutside.md +1 -5
- package/dist/docs/utilities/useClipboard.md +2 -6
- package/dist/docs/utilities/useCookies.md +2 -10
- package/dist/docs/utilities/useCount.md +7 -16
- package/dist/docs/utilities/useDarkMode.md +2 -6
- package/dist/docs/utilities/useDebugInfo.md +6 -20
- package/dist/docs/utilities/useEffectOnce.md +1 -6
- package/dist/docs/utilities/useElapsedTime.md +2 -6
- package/dist/docs/utilities/useElementSize.md +1 -7
- package/dist/docs/utilities/useEsc.md +1 -5
- package/dist/docs/utilities/useEvent.md +1 -5
- package/dist/docs/utilities/useFocusTrap.md +1 -5
- package/dist/docs/utilities/useFullscreen.md +2 -15
- package/dist/docs/utilities/useHover.md +1 -5
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
- package/dist/docs/utilities/useInterval.md +2 -8
- package/dist/docs/utilities/useIsFocusWithin.md +1 -10
- package/dist/docs/utilities/useKey.md +1 -15
- package/dist/docs/utilities/useLocalStorage.md +2 -11
- package/dist/docs/utilities/useLocationSuggestions.md +1 -5
- package/dist/docs/utilities/useMax.md +1 -5
- package/dist/docs/utilities/useMin.md +1 -5
- package/dist/docs/utilities/useMutationObserver.md +3 -11
- package/dist/docs/utilities/useOnScreen.md +1 -8
- package/dist/docs/utilities/useOnlineStatus.md +1 -5
- package/dist/docs/utilities/usePostMessage.md +3 -9
- package/dist/docs/utilities/usePostMessageSender.md +3 -13
- package/dist/docs/utilities/usePrevious.md +1 -5
- package/dist/docs/utilities/useResizeObserver.md +3 -11
- package/dist/docs/utilities/useRioCookieConsent.md +1 -5
- package/dist/docs/utilities/useScrollPosition.md +3 -59
- package/dist/docs/utilities/useSearch.md +2 -16
- package/dist/docs/utilities/useSearchHighlight.md +13 -78
- package/dist/docs/utilities/useSorting.md +18 -43
- package/dist/docs/utilities/useStateWithValidation.md +1 -5
- package/dist/docs/utilities/useSum.md +1 -9
- package/dist/docs/utilities/useTableExport.md +42 -59
- package/dist/docs/utilities/useTableSelection.md +74 -119
- package/dist/docs/utilities/useTimeout.md +2 -6
- package/dist/docs/utilities/useToggle.md +4 -14
- package/dist/docs/utilities/useUrlState.md +2 -27
- package/dist/docs/utilities/useWindowResize.md +1 -5
- package/dist/index.mjs +46 -16
- package/dist/version.json +2 -2
- package/package.json +15 -9
- package/dist/docs/templates/common-table.md +0 -1112
- package/dist/docs/templates/detail-views.md +0 -942
- package/dist/docs/templates/expandable-details.md +0 -228
- package/dist/docs/templates/feature-cards.md +0 -549
- package/dist/docs/templates/form-summary.md +0 -199
- package/dist/docs/templates/form-toggle.md +0 -367
- package/dist/docs/templates/list-blocks.md +0 -1021
- package/dist/docs/templates/loading-progress.md +0 -109
- package/dist/docs/templates/options-panel.md +0 -152
- package/dist/docs/templates/panel-variants.md +0 -164
- package/dist/docs/templates/progress-cards.md +0 -607
- package/dist/docs/templates/progress-success.md +0 -142
- package/dist/docs/templates/settings-form.md +0 -434
- package/dist/docs/templates/stats-blocks.md +0 -1381
- package/dist/docs/templates/table-panel.md +0 -184
- package/dist/docs/templates/table-row-animation.md +0 -317
- package/dist/docs/templates/usage-cards.md +0 -227
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/carousel
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:38.118Z
|
|
7
7
|
|
|
8
8
|
## Carousel
|
|
9
9
|
|
|
@@ -20,19 +20,6 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur.
|
|
|
20
20
|
|
|
21
21
|
Next
|
|
22
22
|
|
|
23
|
-
#### Summary
|
|
24
|
-
|
|
25
|
-
First slide label
|
|
26
|
-
Nulla vitae elit libero, a pharetra augue mollis interdum.
|
|
27
|
-
|
|
28
|
-
Second slide label
|
|
29
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
30
|
-
|
|
31
|
-
Third slide label
|
|
32
|
-
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
|
|
33
|
-
|
|
34
|
-
Next
|
|
35
|
-
|
|
36
23
|
#### React (tsx)
|
|
37
24
|
|
|
38
25
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/chartColors
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:23.285Z
|
|
7
7
|
|
|
8
8
|
The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
|
|
9
9
|
|
|
@@ -166,161 +166,6 @@ color-rating-4
|
|
|
166
166
|
|
|
167
167
|
color-rating-5
|
|
168
168
|
|
|
169
|
-
#### Summary
|
|
170
|
-
|
|
171
|
-
Warmup colors
|
|
172
|
-
color-warmup-crimson
|
|
173
|
-
|
|
174
|
-
color-warmup-victoria
|
|
175
|
-
|
|
176
|
-
color-warmup-cadillac
|
|
177
|
-
|
|
178
|
-
color-warmup-raspberry
|
|
179
|
-
|
|
180
|
-
color-warmup-cerise
|
|
181
|
-
|
|
182
|
-
color-warmup-charm
|
|
183
|
-
|
|
184
|
-
color-warmup-salmon
|
|
185
|
-
|
|
186
|
-
color-warmup-cherokee
|
|
187
|
-
|
|
188
|
-
color-warmup-corn
|
|
189
|
-
|
|
190
|
-
Coldplay colors
|
|
191
|
-
color-coldplay-wine
|
|
192
|
-
|
|
193
|
-
color-coldplay-aubergine
|
|
194
|
-
|
|
195
|
-
color-coldplay-kashmir
|
|
196
|
-
|
|
197
|
-
color-coldplay-fountain
|
|
198
|
-
|
|
199
|
-
color-coldplay-turquoise
|
|
200
|
-
|
|
201
|
-
color-coldplay-bermuda
|
|
202
|
-
|
|
203
|
-
color-coldplay-moos
|
|
204
|
-
|
|
205
|
-
color-coldplay-primrose
|
|
206
|
-
|
|
207
|
-
color-coldplay-khaki
|
|
208
|
-
|
|
209
|
-
Spectrum colors
|
|
210
|
-
color-spectrum-indigo
|
|
211
|
-
|
|
212
|
-
color-spectrum-violet
|
|
213
|
-
|
|
214
|
-
color-spectrum-purple
|
|
215
|
-
|
|
216
|
-
color-spectrum-fuchsia
|
|
217
|
-
|
|
218
|
-
color-spectrum-pink
|
|
219
|
-
|
|
220
|
-
color-spectrum-rose
|
|
221
|
-
|
|
222
|
-
Brand colors
|
|
223
|
-
brand-primary
|
|
224
|
-
|
|
225
|
-
brand-secondary
|
|
226
|
-
|
|
227
|
-
brand-primary-decent
|
|
228
|
-
|
|
229
|
-
brand-secondary-decent
|
|
230
|
-
|
|
231
|
-
brand-info
|
|
232
|
-
|
|
233
|
-
brand-success
|
|
234
|
-
|
|
235
|
-
brand-warning
|
|
236
|
-
|
|
237
|
-
brand-danger
|
|
238
|
-
|
|
239
|
-
brand-info-decent
|
|
240
|
-
|
|
241
|
-
brand-success-decent
|
|
242
|
-
|
|
243
|
-
brand-warning-decent
|
|
244
|
-
|
|
245
|
-
brand-danger-decent
|
|
246
|
-
|
|
247
|
-
Highlight colors
|
|
248
|
-
color-highlight-darkest
|
|
249
|
-
|
|
250
|
-
color-highlight-darker
|
|
251
|
-
|
|
252
|
-
color-highlight-dark
|
|
253
|
-
|
|
254
|
-
color-highlight
|
|
255
|
-
|
|
256
|
-
color-highlight-light
|
|
257
|
-
|
|
258
|
-
color-highlight-lighter
|
|
259
|
-
|
|
260
|
-
color-highlight-lightest
|
|
261
|
-
|
|
262
|
-
color-highlight-decent
|
|
263
|
-
|
|
264
|
-
Base colors
|
|
265
|
-
gray-darkest
|
|
266
|
-
|
|
267
|
-
gray-darker
|
|
268
|
-
|
|
269
|
-
gray-dark
|
|
270
|
-
|
|
271
|
-
gray
|
|
272
|
-
|
|
273
|
-
gray-light
|
|
274
|
-
|
|
275
|
-
gray-lighter
|
|
276
|
-
|
|
277
|
-
gray-lightest
|
|
278
|
-
|
|
279
|
-
gray-decent
|
|
280
|
-
|
|
281
|
-
Map marker colors
|
|
282
|
-
color-map-marker-text
|
|
283
|
-
|
|
284
|
-
color-map-marker-active
|
|
285
|
-
|
|
286
|
-
color-map-marker-asset
|
|
287
|
-
|
|
288
|
-
color-map-marker-poi
|
|
289
|
-
|
|
290
|
-
color-map-marker-geofence
|
|
291
|
-
|
|
292
|
-
color-map-marker-route
|
|
293
|
-
|
|
294
|
-
color-map-marker-info
|
|
295
|
-
|
|
296
|
-
color-map-marker-success
|
|
297
|
-
|
|
298
|
-
color-map-marker-warning
|
|
299
|
-
|
|
300
|
-
color-map-marker-danger
|
|
301
|
-
|
|
302
|
-
color-map-marker-restrictions
|
|
303
|
-
|
|
304
|
-
Driving status colors
|
|
305
|
-
color-status-available
|
|
306
|
-
|
|
307
|
-
color-status-driving
|
|
308
|
-
|
|
309
|
-
color-status-resting
|
|
310
|
-
|
|
311
|
-
color-status-working
|
|
312
|
-
|
|
313
|
-
Rating colors
|
|
314
|
-
color-rating-1
|
|
315
|
-
|
|
316
|
-
color-rating-2
|
|
317
|
-
|
|
318
|
-
color-rating-3
|
|
319
|
-
|
|
320
|
-
color-rating-4
|
|
321
|
-
|
|
322
|
-
color-rating-5
|
|
323
|
-
|
|
324
169
|
#### HTML (html)
|
|
325
170
|
|
|
326
171
|
```html
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/chartsGettingStarted
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:22.405Z
|
|
7
7
|
|
|
8
8
|
The UIKIT chart components are simple wrapper components for the Recharts charting library.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* CSS Only
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/chat
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:12.453Z
|
|
7
7
|
|
|
8
8
|
The chat component is a pure CSS component.
|
|
9
9
|
|
|
@@ -88,85 +88,6 @@ Coming right up!
|
|
|
88
88
|
10:07
|
|
89
89
|
Translate
|
|
90
90
|
|
|
91
|
-
#### Summary
|
|
92
|
-
|
|
93
|
-
Hi! I'd like to get an ice cream, but I don't really like many flavors.
|
|
94
|
-
10:01
|
|
95
|
-
|
|
96
|
-
Ice cream vendor
|
|
97
|
-
|
|
98
|
-
No worries! We have some simple flavors. What do you usually enjoy?
|
|
99
|
-
10:02
|
|
100
|
-
Translate
|
|
101
|
-
|
|
102
|
-
I’m not a fan of chocolate, strawberry, or anything with nuts.
|
|
103
|
-
10:03
|
|
104
|
-
|
|
105
|
-
Ice cream vendor
|
|
106
|
-
|
|
107
|
-
Got it. How about vanilla? It’s classic and not too overwhelming.
|
|
108
|
-
10:04
|
|
109
|
-
Translate
|
|
110
|
-
|
|
111
|
-
Yeah, vanilla works for me. Do you have anything else that’s mild?
|
|
112
|
-
10:05
|
|
113
|
-
|
|
114
|
-
Ice cream vendor
|
|
115
|
-
|
|
116
|
-
We have a nice plain mango sorbet and a simple caramel ice cream as well.
|
|
117
|
-
10:06
|
|
118
|
-
Translate
|
|
119
|
-
|
|
120
|
-
The mango is refreshing, while caramel is a bit richer but still simple.
|
|
121
|
-
10:07
|
|
122
|
-
Translate
|
|
123
|
-
|
|
124
|
-
I’ll take a scoop of vanilla and mango sorbet, please.
|
|
125
|
-
10:08
|
|
126
|
-
|
|
127
|
-
Ice cream vendor
|
|
128
|
-
|
|
129
|
-
Great choice! That’ll be ready in a moment.
|
|
130
|
-
10:09
|
|
131
|
-
Translate
|
|
132
|
-
|
|
133
|
-
Today
|
|
134
|
-
|
|
135
|
-
Hey, yesterday's vanilla was great! I'd love to try something different today.
|
|
136
|
-
10:01
|
|
137
|
-
|
|
138
|
-
Ice cream vendor
|
|
139
|
-
|
|
140
|
-
Glad to hear it! We’ve got some new flavors in. What are you in the mood for?
|
|
141
|
-
10:02
|
|
142
|
-
Translate
|
|
143
|
-
|
|
144
|
-
Maybe something fruity. What do you recommend?
|
|
145
|
-
10:03
|
|
146
|
-
|
|
147
|
-
Ice cream vendor
|
|
148
|
-
|
|
149
|
-
Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.
|
|
150
|
-
10:04
|
|
151
|
-
Translate
|
|
152
|
-
|
|
153
|
-
😍
|
|
154
|
-
|
|
155
|
-
The lemon’s tangy and refreshing, perfect for a warm day.
|
|
156
|
-
10:05
|
|
157
|
-
Translate
|
|
158
|
-
|
|
159
|
-
I’ll go with the lemon sorbet today. Thanks!
|
|
160
|
-
10:06
|
|
161
|
-
|
|
162
|
-
❤️
|
|
163
|
-
|
|
164
|
-
Ice cream vendor
|
|
165
|
-
|
|
166
|
-
Coming right up!
|
|
167
|
-
10:07
|
|
168
|
-
Translate
|
|
169
|
-
|
|
170
91
|
#### React (tsx)
|
|
171
92
|
|
|
172
93
|
```tsx
|
|
@@ -524,7 +445,7 @@ export default () => {
|
|
|
524
445
|
|
|
525
446
|
```html
|
|
526
447
|
<div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
|
|
527
|
-
<div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -
|
|
448
|
+
<div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -9.40452px; transform: none;">
|
|
528
449
|
<div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
|
|
529
450
|
</div>
|
|
530
451
|
<div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
|
|
@@ -3,49 +3,24 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/checkbox
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:07.411Z
|
|
7
7
|
|
|
8
8
|
## Checkbox
|
|
9
9
|
|
|
10
10
|
### Example: Example 1
|
|
11
11
|
|
|
12
|
-
Select
|
|
12
|
+
Select multiple Some custom text
|
|
13
13
|
This one is initially checked
|
|
14
14
|
Indeterminate state
|
|
15
|
-
Disabled
|
|
15
|
+
Disabled checkboxes Disabled checkbox
|
|
16
16
|
Disabled checked checkbox
|
|
17
|
-
Various
|
|
17
|
+
Various props Checkbox with provided label
|
|
18
18
|
Checkbox with error state
|
|
19
|
-
Required Checkbox *
|
|
20
|
-
Required submit test
|
|
19
|
+
Required Checkbox * Required submit test
|
|
21
20
|
|
|
22
21
|
Some text containing a link to Terms and Condition which need to be read.
|
|
23
22
|
|
|
24
|
-
Option
|
|
25
|
-
|
|
26
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
|
|
27
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
|
|
28
|
-
|
|
29
|
-
Large checkbox
|
|
30
|
-
|
|
31
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
|
|
32
|
-
Checkbox inside grid layout
|
|
33
|
-
|
|
34
|
-
#### Summary
|
|
35
|
-
|
|
36
|
-
Select multipleSome custom text
|
|
37
|
-
This one is initially checked
|
|
38
|
-
Indeterminate state
|
|
39
|
-
Disabled checkboxesDisabled checkbox
|
|
40
|
-
Disabled checked checkbox
|
|
41
|
-
Various propsCheckbox with provided label
|
|
42
|
-
Checkbox with error state
|
|
43
|
-
Required Checkbox *
|
|
44
|
-
Required submit test
|
|
45
|
-
|
|
46
|
-
Some text containing a link to Terms and Condition which need to be read.
|
|
47
|
-
|
|
48
|
-
Option 1Option 2Option 3
|
|
23
|
+
Option 1 Option 2 Option 3
|
|
49
24
|
|
|
50
25
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
|
|
51
26
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
|
|
@@ -349,11 +324,7 @@ export default () => (
|
|
|
349
324
|
|
|
350
325
|
### Example: Example 2
|
|
351
326
|
|
|
352
|
-
Option
|
|
353
|
-
|
|
354
|
-
#### Summary
|
|
355
|
-
|
|
356
|
-
Option 1Option 2Option 3
|
|
327
|
+
Option 1 Option 2 Option 3
|
|
357
328
|
|
|
358
329
|
#### React (tsx)
|
|
359
330
|
|
|
@@ -432,23 +403,7 @@ export default () => {
|
|
|
432
403
|
|
|
433
404
|
### Example: This option is a first option
|
|
434
405
|
|
|
435
|
-
Custom checkbox
|
|
436
|
-
This option is a first option
|
|
437
|
-
|
|
438
|
-
Option 2
|
|
439
|
-
This option is a second option
|
|
440
|
-
|
|
441
|
-
Option 3
|
|
442
|
-
This option is a third option
|
|
443
|
-
|
|
444
|
-
Custom checkbox list as pick list without tickBanana
|
|
445
|
-
Peach
|
|
446
|
-
Pear
|
|
447
|
-
Strawberry
|
|
448
|
-
|
|
449
|
-
#### Summary
|
|
450
|
-
|
|
451
|
-
Custom checkbox listOption 1
|
|
406
|
+
Custom checkbox list Option 1
|
|
452
407
|
This option is a first option
|
|
453
408
|
|
|
454
409
|
Option 2
|
|
@@ -457,7 +412,7 @@ This option is a second option
|
|
|
457
412
|
Option 3
|
|
458
413
|
This option is a third option
|
|
459
414
|
|
|
460
|
-
Custom checkbox list as pick list without
|
|
415
|
+
Custom checkbox list as pick list without tick Banana
|
|
461
416
|
Peach
|
|
462
417
|
Pear
|
|
463
418
|
Strawberry
|
|
@@ -662,18 +617,6 @@ This option is a second option
|
|
|
662
617
|
Option 3
|
|
663
618
|
This option is a third option
|
|
664
619
|
|
|
665
|
-
#### Summary
|
|
666
|
-
|
|
667
|
-
Custom checkbox list
|
|
668
|
-
Option 1
|
|
669
|
-
This option is a first option
|
|
670
|
-
|
|
671
|
-
Option 2
|
|
672
|
-
This option is a second option
|
|
673
|
-
|
|
674
|
-
Option 3
|
|
675
|
-
This option is a third option
|
|
676
|
-
|
|
677
620
|
#### React (tsx)
|
|
678
621
|
|
|
679
622
|
```tsx
|
|
@@ -803,13 +746,9 @@ export default () => {
|
|
|
803
746
|
|
|
804
747
|
### Example: Example 5
|
|
805
748
|
|
|
806
|
-
Option
|
|
807
|
-
Option 1Option 2Option 3
|
|
808
|
-
|
|
809
|
-
#### Summary
|
|
749
|
+
Option 1 Option 2 Option 3
|
|
810
750
|
|
|
811
|
-
Option
|
|
812
|
-
Option 1Option 2Option 3
|
|
751
|
+
Option 1 Option 2 Option 3
|
|
813
752
|
|
|
814
753
|
#### React (tsx)
|
|
815
754
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Progress
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/circularProgress
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:33.947Z
|
|
7
7
|
|
|
8
8
|
## CircularProgress
|
|
9
9
|
|
|
@@ -42,41 +42,6 @@ Strong customization
|
|
|
42
42
|
|
|
43
43
|
3200 Points
|
|
44
44
|
|
|
45
|
-
#### Summary
|
|
46
|
-
|
|
47
|
-
Default circular progress
|
|
48
|
-
30
|
|
49
|
-
|
|
50
|
-
Circular progress customizations
|
|
51
|
-
85 km/h
|
|
52
|
-
|
|
53
|
-
Speed
|
|
54
|
-
|
|
55
|
-
40%
|
|
56
|
-
|
|
57
|
-
Custom label
|
|
58
|
-
|
|
59
|
-
100
|
|
60
|
-
|
|
61
|
-
With max value
|
|
62
|
-
|
|
63
|
-
Different sizes with custom value label
|
|
64
|
-
|
|
65
|
-
xs
|
|
66
|
-
|
|
67
|
-
sm
|
|
68
|
-
|
|
69
|
-
md
|
|
70
|
-
|
|
71
|
-
lg
|
|
72
|
-
|
|
73
|
-
xl
|
|
74
|
-
|
|
75
|
-
Strong customization
|
|
76
|
-
40%
|
|
77
|
-
|
|
78
|
-
3200 Points
|
|
79
|
-
|
|
80
45
|
#### React (tsx)
|
|
81
46
|
|
|
82
47
|
```tsx
|
|
@@ -194,7 +159,7 @@ export default () => (
|
|
|
194
159
|
<svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
|
|
195
160
|
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
|
|
196
161
|
</circle>
|
|
197
|
-
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="
|
|
162
|
+
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="232.1888707702918">
|
|
198
163
|
</circle>
|
|
199
164
|
</svg>
|
|
200
165
|
<div class="position-absolute display-grid place-items-center">30</div>
|
|
@@ -212,7 +177,7 @@ export default () => (
|
|
|
212
177
|
<svg width="80" height="80" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
|
|
213
178
|
<circle cx="50" cy="50" r="48" fill="none" stroke="var(--gray-lighter)" stroke-width="4" class="">
|
|
214
179
|
</circle>
|
|
215
|
-
<circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="
|
|
180
|
+
<circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="133.5511369847114">
|
|
216
181
|
</circle>
|
|
217
182
|
</svg>
|
|
218
183
|
<div class="position-absolute display-grid place-items-center text-italic">85 km/h</div>
|
|
@@ -224,7 +189,7 @@ export default () => (
|
|
|
224
189
|
<svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
|
|
225
190
|
<circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--gray-lighter)" stroke-width="3" class="">
|
|
226
191
|
</circle>
|
|
227
|
-
<circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="
|
|
192
|
+
<circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="224.83227905158662">
|
|
228
193
|
</circle>
|
|
229
194
|
</svg>
|
|
230
195
|
<div class="position-absolute display-grid place-items-center text-size-16 text-medium text-color-dark">40%</div>
|
|
@@ -236,7 +201,7 @@ export default () => (
|
|
|
236
201
|
<svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
|
|
237
202
|
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
|
|
238
203
|
</circle>
|
|
239
|
-
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="
|
|
204
|
+
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="225.87357595251748">
|
|
240
205
|
</circle>
|
|
241
206
|
</svg>
|
|
242
207
|
<div class="position-absolute display-grid place-items-center text-size-">100</div>
|
|
@@ -389,12 +354,6 @@ export default () => (
|
|
|
389
354
|
|
|
390
355
|
Processing configuration...
|
|
391
356
|
|
|
392
|
-
#### Summary
|
|
393
|
-
|
|
394
|
-
0%
|
|
395
|
-
|
|
396
|
-
Processing configuration...
|
|
397
|
-
|
|
398
357
|
#### React (tsx)
|
|
399
358
|
|
|
400
359
|
```tsx
|
|
@@ -427,14 +386,14 @@ export default () => {
|
|
|
427
386
|
|
|
428
387
|
```html
|
|
429
388
|
<div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:rb:">
|
|
430
|
-
<div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="
|
|
389
|
+
<div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
|
|
431
390
|
<svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
|
|
432
391
|
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
|
|
433
392
|
</circle>
|
|
434
|
-
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="
|
|
393
|
+
<circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="259.45387653501234">
|
|
435
394
|
</circle>
|
|
436
395
|
</svg>
|
|
437
|
-
<div class="position-absolute display-grid place-items-center">
|
|
396
|
+
<div class="position-absolute display-grid place-items-center">20%</div>
|
|
438
397
|
</div>
|
|
439
398
|
<div id="circular-progress-label-:rb:" class="">Processing configuration...</div>
|
|
440
399
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/clearableInput
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:07.882Z
|
|
7
7
|
|
|
8
8
|
Control, which can be cleared when it has a value.
|
|
9
9
|
|
|
@@ -21,8 +21,7 @@ With a button addon
|
|
|
21
21
|
|
|
22
22
|
With many button addons
|
|
23
23
|
|
|
24
|
-
With addons
|
|
25
|
-
Button
|
|
24
|
+
With addons Button
|
|
26
25
|
|
|
27
26
|
With addons on both sides
|
|
28
27
|
|
|
@@ -41,40 +40,6 @@ Large input
|
|
|
41
40
|
KM
|
|
42
41
|
|
|
43
42
|
With feedback
|
|
44
|
-
|
|
45
|
-
Disabled input
|
|
46
|
-
|
|
47
|
-
#### Summary
|
|
48
|
-
|
|
49
|
-
Default
|
|
50
|
-
|
|
51
|
-
With a default value
|
|
52
|
-
|
|
53
|
-
With a button addon
|
|
54
|
-
|
|
55
|
-
With many button addons
|
|
56
|
-
|
|
57
|
-
With addons
|
|
58
|
-
Button
|
|
59
|
-
|
|
60
|
-
With addons on both sides
|
|
61
|
-
|
|
62
|
-
KM
|
|
63
|
-
|
|
64
|
-
With type password
|
|
65
|
-
|
|
66
|
-
With type email
|
|
67
|
-
|
|
68
|
-
With limited amount of characters
|
|
69
|
-
|
|
70
|
-
Small input
|
|
71
|
-
|
|
72
|
-
Large input
|
|
73
|
-
|
|
74
|
-
KM
|
|
75
|
-
|
|
76
|
-
With feedback
|
|
77
|
-
|
|
78
43
|
Disabled input
|
|
79
44
|
|
|
80
45
|
#### React (tsx)
|
|
@@ -382,15 +347,7 @@ export default () => (
|
|
|
382
347
|
|
|
383
348
|
### Example: Example 2
|
|
384
349
|
|
|
385
|
-
Controlled example
|
|
386
|
-
|
|
387
|
-
Set random value
|
|
388
|
-
|
|
389
|
-
#### Summary
|
|
390
|
-
|
|
391
|
-
Controlled example
|
|
392
|
-
|
|
393
|
-
Set random value
|
|
350
|
+
Controlled example Set random value
|
|
394
351
|
|
|
395
352
|
#### React (tsx)
|
|
396
353
|
|
|
@@ -475,10 +432,6 @@ export default ClearableInputControlled;
|
|
|
475
432
|
|
|
476
433
|
Controlled component with restriction and used with custom input
|
|
477
434
|
|
|
478
|
-
#### Summary
|
|
479
|
-
|
|
480
|
-
Controlled component with restriction and used with custom input
|
|
481
|
-
|
|
482
435
|
#### React (tsx)
|
|
483
436
|
|
|
484
437
|
```tsx
|
|
@@ -564,18 +517,6 @@ Input with custom mask definition
|
|
|
564
517
|
|
|
565
518
|
Input with Date mask
|
|
566
519
|
|
|
567
|
-
#### Summary
|
|
568
|
-
|
|
569
|
-
Input with input mask
|
|
570
|
-
|
|
571
|
-
Input with input mask that reveals itself on focus
|
|
572
|
-
|
|
573
|
-
Input with input mask that is never shown
|
|
574
|
-
|
|
575
|
-
Input with custom mask definition
|
|
576
|
-
|
|
577
|
-
Input with Date mask
|
|
578
|
-
|
|
579
520
|
#### React (tsx)
|
|
580
521
|
|
|
581
522
|
```tsx
|