@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:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/stepButton
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:11.764Z
|
|
7
7
|
|
|
8
8
|
The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.
|
|
9
9
|
|
|
@@ -12,12 +12,7 @@ The StepButton is a convenient component designed to simplify usage and alignmen
|
|
|
12
12
|
### Example: Step buttons
|
|
13
13
|
|
|
14
14
|
Step buttons
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
#### Summary
|
|
18
|
-
|
|
19
|
-
Step buttons
|
|
20
|
-
PreviousNext
|
|
15
|
+
Previous Next
|
|
21
16
|
|
|
22
17
|
#### React (tsx)
|
|
23
18
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Progress
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/steppedProgressBars
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:36.373Z
|
|
7
7
|
|
|
8
8
|
## SteppedProgressBar - Circle
|
|
9
9
|
|
|
@@ -20,22 +20,7 @@ Label for final step
|
|
|
20
20
|
Content of page 2
|
|
21
21
|
|
|
22
22
|
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.
|
|
23
|
-
Click here to complete this step. There is no other way forward.
|
|
24
|
-
|
|
25
|
-
#### Summary
|
|
26
|
-
|
|
27
|
-
1
|
|
28
|
-
Label for step 1
|
|
29
|
-
|
|
30
|
-
2
|
|
31
|
-
Label for step 2
|
|
32
|
-
|
|
33
|
-
Label for final step
|
|
34
|
-
|
|
35
|
-
Content of page 2
|
|
36
|
-
|
|
37
|
-
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.
|
|
38
|
-
Click here to complete this step. There is no other way forward.PreviousNext
|
|
23
|
+
Click here to complete this step. There is no other way forward. Previous Next
|
|
39
24
|
|
|
40
25
|
#### React (tsx)
|
|
41
26
|
|
|
@@ -256,20 +241,7 @@ Label for final step
|
|
|
256
241
|
Content of page 2
|
|
257
242
|
|
|
258
243
|
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.
|
|
259
|
-
Click here to complete this step. There is no other way forward.
|
|
260
|
-
|
|
261
|
-
#### Summary
|
|
262
|
-
|
|
263
|
-
Label for step 1
|
|
264
|
-
|
|
265
|
-
Label for step 2
|
|
266
|
-
|
|
267
|
-
Label for final step
|
|
268
|
-
|
|
269
|
-
Content of page 2
|
|
270
|
-
|
|
271
|
-
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.
|
|
272
|
-
Click here to complete this step. There is no other way forward.PreviousNext
|
|
244
|
+
Click here to complete this step. There is no other way forward. Previous Next
|
|
273
245
|
|
|
274
246
|
#### React (tsx)
|
|
275
247
|
|
|
@@ -511,23 +483,7 @@ Lorem ipsum dolor
|
|
|
511
483
|
Content of page 2
|
|
512
484
|
|
|
513
485
|
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.
|
|
514
|
-
Click here to complete this step. There is no other way forward.
|
|
515
|
-
|
|
516
|
-
#### Summary
|
|
517
|
-
|
|
518
|
-
Initial step
|
|
519
|
-
Lorem ipsum dolor
|
|
520
|
-
|
|
521
|
-
Second step
|
|
522
|
-
Lorem ipsum dolor
|
|
523
|
-
|
|
524
|
-
Final step
|
|
525
|
-
Lorem ipsum dolor
|
|
526
|
-
|
|
527
|
-
Content of page 2
|
|
528
|
-
|
|
529
|
-
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.
|
|
530
|
-
Click here to complete this step. There is no other way forward.PreviousNext
|
|
486
|
+
Click here to complete this step. There is no other way forward. Previous Next
|
|
531
487
|
|
|
532
488
|
#### React (tsx)
|
|
533
489
|
|
|
@@ -827,20 +783,7 @@ Label for final step
|
|
|
827
783
|
Content of page 2
|
|
828
784
|
|
|
829
785
|
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.
|
|
830
|
-
Click here to complete this step. There is no other way forward.
|
|
831
|
-
|
|
832
|
-
#### Summary
|
|
833
|
-
|
|
834
|
-
Label for step 1
|
|
835
|
-
|
|
836
|
-
Label for step 2
|
|
837
|
-
|
|
838
|
-
Label for final step
|
|
839
|
-
|
|
840
|
-
Content of page 2
|
|
841
|
-
|
|
842
|
-
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.
|
|
843
|
-
Click here to complete this step. There is no other way forward.PreviousNext
|
|
786
|
+
Click here to complete this step. There is no other way forward. Previous Next
|
|
844
787
|
|
|
845
788
|
#### React (tsx)
|
|
846
789
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Navigation
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/subNavigation
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:02.283Z
|
|
7
7
|
|
|
8
8
|
## SubNavigation
|
|
9
9
|
|
|
@@ -13,12 +13,6 @@ Subnavigation 1
|
|
|
13
13
|
Subnavigation 2
|
|
14
14
|
Subnavigation 3
|
|
15
15
|
|
|
16
|
-
#### Summary
|
|
17
|
-
|
|
18
|
-
Subnavigation 1
|
|
19
|
-
Subnavigation 2
|
|
20
|
-
Subnavigation 3
|
|
21
|
-
|
|
22
16
|
#### React (tsx)
|
|
23
17
|
|
|
24
18
|
```tsx
|
|
@@ -97,18 +91,6 @@ Subnavigation 1
|
|
|
97
91
|
Subnavigation 2
|
|
98
92
|
Subnavigation 3
|
|
99
93
|
|
|
100
|
-
#### Summary
|
|
101
|
-
|
|
102
|
-
RIO Service
|
|
103
|
-
|
|
104
|
-
Navigation 1
|
|
105
|
-
Navigation 2
|
|
106
|
-
Navigation 3
|
|
107
|
-
|
|
108
|
-
Subnavigation 1
|
|
109
|
-
Subnavigation 2
|
|
110
|
-
Subnavigation 3
|
|
111
|
-
|
|
112
94
|
#### React (tsx)
|
|
113
95
|
|
|
114
96
|
```tsx
|
|
@@ -304,18 +286,6 @@ Subnavigation 1
|
|
|
304
286
|
Subnavigation 2
|
|
305
287
|
Subnavigation 3
|
|
306
288
|
|
|
307
|
-
#### Summary
|
|
308
|
-
|
|
309
|
-
RIO Service
|
|
310
|
-
|
|
311
|
-
Navigation 1
|
|
312
|
-
Navigation 2
|
|
313
|
-
Navigation 3
|
|
314
|
-
|
|
315
|
-
Subnavigation 1
|
|
316
|
-
Subnavigation 2
|
|
317
|
-
Subnavigation 3
|
|
318
|
-
|
|
319
289
|
#### React (tsx)
|
|
320
290
|
|
|
321
291
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/supportMarker
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:08.200Z
|
|
7
7
|
|
|
8
8
|
You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!
|
|
9
9
|
|
|
@@ -15,12 +15,7 @@ You can use the utility functions provided by the UIKIT for easily adding / remo
|
|
|
15
15
|
|
|
16
16
|
### Example: Example 1
|
|
17
17
|
|
|
18
|
-
Toggle Support
|
|
19
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
20
|
-
|
|
21
|
-
#### Summary
|
|
22
|
-
|
|
23
|
-
Toggle Support MarkersLorem Ipsum
|
|
18
|
+
Toggle Support Markers Lorem Ipsum
|
|
24
19
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
25
20
|
|
|
26
21
|
#### React (tsx)
|
|
@@ -63,13 +58,6 @@ Show support markers
|
|
|
63
58
|
Lorem Ipsum
|
|
64
59
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
65
60
|
|
|
66
|
-
#### Summary
|
|
67
|
-
|
|
68
|
-
Show support markers
|
|
69
|
-
|
|
70
|
-
Lorem Ipsum
|
|
71
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
72
|
-
|
|
73
61
|
#### React (tsx)
|
|
74
62
|
|
|
75
63
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/svgImage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:10.414Z
|
|
7
7
|
|
|
8
8
|
This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.
|
|
9
9
|
|
|
@@ -15,10 +15,6 @@ You can find an overview of all available SVG images here: https://cdn.rio.cloud
|
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
18
|
#### React (tsx)
|
|
23
19
|
|
|
24
20
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/switch
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:14.384Z
|
|
7
7
|
|
|
8
8
|
## Switch
|
|
9
9
|
|
|
@@ -25,38 +25,7 @@ Label
|
|
|
25
25
|
|
|
26
26
|
Switch with different ON/OFF text
|
|
27
27
|
|
|
28
|
-
Switch with autoMinWidth (takes the width from the longest text)Lorem
|
|
29
|
-
|
|
30
|
-
Switch with a longer label and more spacing
|
|
31
|
-
|
|
32
|
-
Lorem ipsum
|
|
33
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
34
|
-
|
|
35
|
-
Lorem ipsum dolor
|
|
36
|
-
|
|
37
|
-
Switch in panels
|
|
38
|
-
|
|
39
|
-
Switch in alerts
|
|
40
|
-
|
|
41
|
-
#### Summary
|
|
42
|
-
|
|
43
|
-
Switch
|
|
44
|
-
|
|
45
|
-
Disabled Switch & disabled active Switch
|
|
46
|
-
|
|
47
|
-
Colored Switch
|
|
48
|
-
|
|
49
|
-
Switch with label
|
|
50
|
-
|
|
51
|
-
Label
|
|
52
|
-
|
|
53
|
-
Switch with label left
|
|
54
|
-
|
|
55
|
-
Label
|
|
56
|
-
|
|
57
|
-
Switch with different ON/OFF text
|
|
58
|
-
|
|
59
|
-
Switch with autoMinWidth (takes the width from the longest text)Lorem
|
|
28
|
+
Switch with autoMinWidth (takes the width from the longest text) Lorem
|
|
60
29
|
|
|
61
30
|
Switch with a longer label and more spacing
|
|
62
31
|
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tables
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:48.697Z
|
|
7
7
|
|
|
8
8
|
The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tagManager
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:11.808Z
|
|
7
7
|
|
|
8
8
|
The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
|
|
9
9
|
|
|
@@ -28,21 +28,6 @@ Bar
|
|
|
28
28
|
|
|
29
29
|
Save
|
|
30
30
|
|
|
31
|
-
#### Summary
|
|
32
|
-
|
|
33
|
-
Type in new fleet group name above
|
|
34
|
-
Choose existing fleet group
|
|
35
|
-
Lorem
|
|
36
|
-
Ipsum
|
|
37
|
-
Dolor sit amet
|
|
38
|
-
Connectivity Test
|
|
39
|
-
|
|
40
|
-
Foo
|
|
41
|
-
|
|
42
|
-
Bar
|
|
43
|
-
|
|
44
|
-
Save
|
|
45
|
-
|
|
46
31
|
#### React (tsx)
|
|
47
32
|
|
|
48
33
|
```tsx
|
|
@@ -181,14 +166,6 @@ Dolor sit amet
|
|
|
181
166
|
|
|
182
167
|
Save
|
|
183
168
|
|
|
184
|
-
#### Summary
|
|
185
|
-
|
|
186
|
-
Lorem
|
|
187
|
-
Ipsum
|
|
188
|
-
Dolor sit amet
|
|
189
|
-
|
|
190
|
-
Save
|
|
191
|
-
|
|
192
169
|
#### React (tsx)
|
|
193
170
|
|
|
194
171
|
```tsx
|
|
@@ -310,23 +287,6 @@ Bar
|
|
|
310
287
|
|
|
311
288
|
Save
|
|
312
289
|
|
|
313
|
-
#### Summary
|
|
314
|
-
|
|
315
|
-
Fleet groups
|
|
316
|
-
Select an already created fleet group or create a new one and save it immediately.
|
|
317
|
-
|
|
318
|
-
Type in new fleet group name above
|
|
319
|
-
Choose existing fleet group
|
|
320
|
-
Lorem
|
|
321
|
-
Ipsum
|
|
322
|
-
Dolor sit amet
|
|
323
|
-
|
|
324
|
-
Foo
|
|
325
|
-
|
|
326
|
-
Bar
|
|
327
|
-
|
|
328
|
-
Save
|
|
329
|
-
|
|
330
290
|
#### React (tsx)
|
|
331
291
|
|
|
332
292
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tags
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:12.121Z
|
|
7
7
|
|
|
8
8
|
## Tag
|
|
9
9
|
|
|
@@ -144,143 +144,6 @@ Truck F
|
|
|
144
144
|
|
|
145
145
|
Truck G
|
|
146
146
|
|
|
147
|
-
#### Summary
|
|
148
|
-
|
|
149
|
-
Tags
|
|
150
|
-
Link
|
|
151
|
-
|
|
152
|
-
Text
|
|
153
|
-
|
|
154
|
-
Icon
|
|
155
|
-
|
|
156
|
-
Clickable
|
|
157
|
-
|
|
158
|
-
Revertable
|
|
159
|
-
|
|
160
|
-
Active
|
|
161
|
-
|
|
162
|
-
Disabled
|
|
163
|
-
|
|
164
|
-
Deletable
|
|
165
|
-
|
|
166
|
-
Selectable
|
|
167
|
-
|
|
168
|
-
Selectable active
|
|
169
|
-
|
|
170
|
-
Not round
|
|
171
|
-
|
|
172
|
-
Small Tags
|
|
173
|
-
Link
|
|
174
|
-
|
|
175
|
-
Text
|
|
176
|
-
|
|
177
|
-
Icon
|
|
178
|
-
|
|
179
|
-
Clickable
|
|
180
|
-
|
|
181
|
-
Revertable active
|
|
182
|
-
|
|
183
|
-
Active
|
|
184
|
-
|
|
185
|
-
Disabled
|
|
186
|
-
|
|
187
|
-
Deletable
|
|
188
|
-
|
|
189
|
-
Selectable
|
|
190
|
-
|
|
191
|
-
Selectable
|
|
192
|
-
|
|
193
|
-
Not round
|
|
194
|
-
|
|
195
|
-
Multiline Tags
|
|
196
|
-
Some long multiline text
|
|
197
|
-
|
|
198
|
-
Some long multiline text
|
|
199
|
-
|
|
200
|
-
Small Multiline Tags
|
|
201
|
-
Some long multiline text
|
|
202
|
-
|
|
203
|
-
Some long multiline text
|
|
204
|
-
|
|
205
|
-
Muted Tags
|
|
206
|
-
Text Tag
|
|
207
|
-
|
|
208
|
-
Icon Tag
|
|
209
|
-
|
|
210
|
-
Selectable Tag
|
|
211
|
-
|
|
212
|
-
Muted Tags with context links
|
|
213
|
-
Link Tag
|
|
214
|
-
|
|
215
|
-
Link Tag
|
|
216
|
-
|
|
217
|
-
Link Tag
|
|
218
|
-
|
|
219
|
-
Link Tag
|
|
220
|
-
|
|
221
|
-
Link Tag
|
|
222
|
-
|
|
223
|
-
Vertical TagList
|
|
224
|
-
Link
|
|
225
|
-
|
|
226
|
-
Text
|
|
227
|
-
|
|
228
|
-
Icon
|
|
229
|
-
|
|
230
|
-
Clickable
|
|
231
|
-
|
|
232
|
-
Revertable
|
|
233
|
-
|
|
234
|
-
Active
|
|
235
|
-
|
|
236
|
-
Disabled
|
|
237
|
-
|
|
238
|
-
Deletable
|
|
239
|
-
|
|
240
|
-
Selectable
|
|
241
|
-
|
|
242
|
-
Selectable active
|
|
243
|
-
|
|
244
|
-
Not round
|
|
245
|
-
|
|
246
|
-
Vertical TagList (autoTagWidth)
|
|
247
|
-
Link
|
|
248
|
-
|
|
249
|
-
Text
|
|
250
|
-
|
|
251
|
-
Icon
|
|
252
|
-
|
|
253
|
-
Clickable
|
|
254
|
-
|
|
255
|
-
Revertable
|
|
256
|
-
|
|
257
|
-
Active
|
|
258
|
-
|
|
259
|
-
Disabled
|
|
260
|
-
|
|
261
|
-
Deletable
|
|
262
|
-
|
|
263
|
-
Selectable
|
|
264
|
-
|
|
265
|
-
Selectable active
|
|
266
|
-
|
|
267
|
-
Not round
|
|
268
|
-
|
|
269
|
-
Column TagList
|
|
270
|
-
Truck A
|
|
271
|
-
|
|
272
|
-
Truck B
|
|
273
|
-
|
|
274
|
-
Truck C
|
|
275
|
-
|
|
276
|
-
Truck D
|
|
277
|
-
|
|
278
|
-
Truck E
|
|
279
|
-
|
|
280
|
-
Truck F
|
|
281
|
-
|
|
282
|
-
Truck G
|
|
283
|
-
|
|
284
147
|
#### React (tsx)
|
|
285
148
|
|
|
286
149
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/teaser
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:50.599Z
|
|
7
7
|
|
|
8
8
|
The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
|
|
9
9
|
|
|
@@ -131,127 +131,7 @@ Box headline
|
|
|
131
131
|
|
|
132
132
|
Lorem ipsum dolor sit amet, dui eget elit.
|
|
133
133
|
|
|
134
|
-
Button
|
|
135
|
-
|
|
136
|
-
#### Summary
|
|
137
|
-
|
|
138
|
-
Box headline
|
|
139
|
-
|
|
140
|
-
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. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
|
|
141
|
-
|
|
142
|
-
Box headline
|
|
143
|
-
|
|
144
|
-
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. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
|
|
145
|
-
|
|
146
|
-
Button text
|
|
147
|
-
|
|
148
|
-
Box headline
|
|
149
|
-
|
|
150
|
-
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.
|
|
151
|
-
|
|
152
|
-
Button text
|
|
153
|
-
|
|
154
|
-
Box headline
|
|
155
|
-
|
|
156
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
157
|
-
|
|
158
|
-
Button text
|
|
159
|
-
|
|
160
|
-
Box headline
|
|
161
|
-
|
|
162
|
-
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.
|
|
163
|
-
|
|
164
|
-
Button text
|
|
165
|
-
|
|
166
|
-
Box headline
|
|
167
|
-
|
|
168
|
-
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.
|
|
169
|
-
|
|
170
|
-
Button text
|
|
171
|
-
|
|
172
|
-
Box headline
|
|
173
|
-
|
|
174
|
-
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.
|
|
175
|
-
|
|
176
|
-
Button text
|
|
177
|
-
|
|
178
|
-
Box headline
|
|
179
|
-
|
|
180
|
-
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.
|
|
181
|
-
|
|
182
|
-
Button text
|
|
183
|
-
|
|
184
|
-
Box headline
|
|
185
|
-
|
|
186
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
187
|
-
|
|
188
|
-
Button text
|
|
189
|
-
|
|
190
|
-
Text
|
|
191
|
-
|
|
192
|
-
Text
|
|
193
|
-
|
|
194
|
-
Text
|
|
195
|
-
|
|
196
|
-
Text
|
|
197
|
-
|
|
198
|
-
Text
|
|
199
|
-
|
|
200
|
-
Text
|
|
201
|
-
|
|
202
|
-
Box 1
|
|
203
|
-
|
|
204
|
-
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.
|
|
205
|
-
|
|
206
|
-
Button text
|
|
207
|
-
|
|
208
|
-
Box 2
|
|
209
|
-
|
|
210
|
-
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.
|
|
211
|
-
|
|
212
|
-
Button text
|
|
213
|
-
|
|
214
|
-
Box 3
|
|
215
|
-
|
|
216
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
217
|
-
|
|
218
|
-
Button text
|
|
219
|
-
|
|
220
|
-
Box 4
|
|
221
|
-
|
|
222
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
223
|
-
|
|
224
|
-
Button text
|
|
225
|
-
|
|
226
|
-
Box 1
|
|
227
|
-
|
|
228
|
-
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.
|
|
229
|
-
|
|
230
|
-
Button text
|
|
231
|
-
|
|
232
|
-
Box 2
|
|
233
|
-
|
|
234
|
-
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.
|
|
235
|
-
|
|
236
|
-
Button text
|
|
237
|
-
|
|
238
|
-
Box 3
|
|
239
|
-
|
|
240
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
241
|
-
|
|
242
|
-
Button text
|
|
243
|
-
|
|
244
|
-
Box 4
|
|
245
|
-
|
|
246
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
247
|
-
|
|
248
|
-
Button text
|
|
249
|
-
|
|
250
|
-
Box headline
|
|
251
|
-
|
|
252
|
-
Lorem ipsum dolor sit amet, dui eget elit.
|
|
253
|
-
|
|
254
|
-
Button textButton text
|
|
134
|
+
Button text Button text
|
|
255
135
|
|
|
256
136
|
#### React (tsx)
|
|
257
137
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/textTruncateMiddle
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:51.545Z
|
|
7
7
|
|
|
8
8
|
TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.
|
|
9
9
|
|
|
@@ -13,14 +13,7 @@ Useful for IDs, URLs, and file names where the suffix helps identify the value q
|
|
|
13
13
|
|
|
14
14
|
### Example: Example 1
|
|
15
15
|
|
|
16
|
-
Drag the right handle to change
|
|
17
|
-
|
|
18
|
-
Suffix length
|
|
19
|
-
9
|
|
20
|
-
|
|
21
|
-
#### Summary
|
|
22
|
-
|
|
23
|
-
Drag the right handle to change width2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1ehttps://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details
|
|
16
|
+
Drag the right handle to change width 2bb5e796-6c5e-4bc4-871b-f3af- d469-1c1e https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1 e/details
|
|
24
17
|
|
|
25
18
|
Suffix length
|
|
26
19
|
9
|