@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:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/radialBarCharts
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:33.419Z
|
|
7
7
|
|
|
8
8
|
## RadialBarChart
|
|
9
9
|
|
|
@@ -11,27 +11,15 @@
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
Multiple RadialBarChart
|
|
14
|
+
Multiple RadialBarChart bars Age 18-24
|
|
15
15
|
Age 25-29
|
|
16
16
|
Age 30-34
|
|
17
17
|
Age 35-39
|
|
18
18
|
|
|
19
|
-
31.
|
|
19
|
+
31.47 26.69 -15.69 8.22
|
|
20
20
|
|
|
21
|
-
67%Registrations
|
|
22
|
-
56%Logins
|
|
23
|
-
|
|
24
|
-
#### Summary
|
|
25
|
-
|
|
26
|
-
Multiple RadialBarChart barsAge 18-24
|
|
27
|
-
Age 25-29
|
|
28
|
-
Age 30-34
|
|
29
|
-
Age 35-39
|
|
30
|
-
|
|
31
|
-
31.4726.69-15.698.22
|
|
32
|
-
|
|
33
|
-
67%Registrations
|
|
34
|
-
56%Logins
|
|
21
|
+
67% Registrations
|
|
22
|
+
56% Logins
|
|
35
23
|
|
|
36
24
|
#### React (tsx)
|
|
37
25
|
|
|
@@ -263,8 +251,8 @@ const data2: CustomData2[] = [
|
|
|
263
251
|
<path name="Age 18-24" cx="120" cy="180" fill="#ef7186 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 95.1104,137.0883
|
|
264
252
|
A 49.6075,49.6075,0,
|
|
265
253
|
0,1,
|
|
266
|
-
|
|
267
|
-
L
|
|
254
|
+
127.252,130.9254
|
|
255
|
+
L 125.0592,145.7643
|
|
268
256
|
A 34.6075,34.6075,0,
|
|
269
257
|
0,0,
|
|
270
258
|
102.6364,150.0637 Z">
|
|
@@ -272,8 +260,8 @@ const data2: CustomData2[] = [
|
|
|
272
260
|
<path name="Age 25-29" cx="120" cy="180" fill="#e878b6 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 85.5399,120.588
|
|
273
261
|
A 68.6825,68.6825,0,
|
|
274
262
|
0,1,
|
|
275
|
-
|
|
276
|
-
L
|
|
263
|
+
123.0619,111.3858
|
|
264
|
+
L 122.3932,126.3709
|
|
277
265
|
A 53.6825,53.6825,0,
|
|
278
266
|
0,0,
|
|
279
267
|
93.0659,133.5633 Z">
|
|
@@ -281,8 +269,8 @@ const data2: CustomData2[] = [
|
|
|
281
269
|
<path name="Age 30-34" cx="120" cy="180" fill="#dc82e9 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 75.9695,104.0876
|
|
282
270
|
A 87.7575,87.7575,0,
|
|
283
271
|
0,0,
|
|
284
|
-
|
|
285
|
-
L
|
|
272
|
+
53.4484,122.7964
|
|
273
|
+
L 64.8237,132.5739
|
|
286
274
|
A 72.7575,72.7575,0,
|
|
287
275
|
0,1,
|
|
288
276
|
83.4954,117.063 Z">
|
|
@@ -290,8 +278,8 @@ const data2: CustomData2[] = [
|
|
|
290
278
|
<path name="Age 35-39" color="color-warmup-corn" cx="120" cy="180" fill="#fde082 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 66.399,87.5873
|
|
291
279
|
A 106.8325,106.8325,0,
|
|
292
280
|
0,1,
|
|
293
|
-
|
|
294
|
-
L
|
|
281
|
+
83.3685,79.6441
|
|
282
|
+
L 88.5118,93.7347
|
|
295
283
|
A 91.8325,91.8325,0,
|
|
296
284
|
0,0,
|
|
297
285
|
73.9249,100.5626 Z">
|
|
@@ -406,19 +394,19 @@ const data2: CustomData2[] = [
|
|
|
406
394
|
<g class="recharts-layer">
|
|
407
395
|
<path name="Registrations" color="color-coldplay-fountain" cx="134" cy="134" fill="#67abc5 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,24.6242
|
|
408
396
|
A5,5,0,0,1,139.2283,19.6294
|
|
409
|
-
A114.49,114.49,0,0,1,
|
|
410
|
-
A5,5,0,0,1,
|
|
411
|
-
|
|
412
|
-
A5,5,0,0,1,
|
|
397
|
+
A114.49,114.49,0,0,1,244.4506,103.8566
|
|
398
|
+
A5,5,0,0,1,240.7218,110.0517
|
|
399
|
+
L240.7218,110.0517
|
|
400
|
+
A5,5,0,0,1,234.8034,106.4895
|
|
413
401
|
A104.49,104.49,0,0,0,138.7717,29.619
|
|
414
402
|
A5,5,0,0,1,134,24.6242Z">
|
|
415
403
|
</path>
|
|
416
404
|
<path name="Logins" color="color-coldplay-moos" cx="134" cy="134" fill="#a1daa3 " class="recharts-sector recharts-radial-bar-sector undefined" d="M 134,11.7122
|
|
417
405
|
A5,5,0,0,1,139.2043,6.7163
|
|
418
|
-
A127.39,127.39,0,0,1,
|
|
419
|
-
A5,5,0,0,1,
|
|
420
|
-
|
|
421
|
-
A5,5,0,0,1,
|
|
406
|
+
A127.39,127.39,0,0,1,246.8021,74.8063
|
|
407
|
+
A5,5,0,0,1,244.5152,81.6483
|
|
408
|
+
L244.5152,81.6483
|
|
409
|
+
A5,5,0,0,1,237.9473,79.453
|
|
422
410
|
A117.39,117.39,0,0,0,138.7957,16.708
|
|
423
411
|
A5,5,0,0,1,134,11.7122Z">
|
|
424
412
|
</path>
|
|
@@ -536,13 +524,7 @@ const data2: CustomData2[] = [
|
|
|
536
524
|
|
|
537
525
|
### Example: Example 2
|
|
538
526
|
|
|
539
|
-
Circle RadialBarChart with built-in
|
|
540
|
-
|
|
541
|
-
82
|
|
542
|
-
|
|
543
|
-
#### Summary
|
|
544
|
-
|
|
545
|
-
Circle RadialBarChart with built-in text82%
|
|
527
|
+
Circle RadialBarChart with built-in text 82%
|
|
546
528
|
|
|
547
529
|
82
|
|
548
530
|
|
|
@@ -655,10 +637,10 @@ const data = [
|
|
|
655
637
|
<g class="recharts-layer">
|
|
656
638
|
<path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 84,13.4748
|
|
657
639
|
A6,6,0,0,1,90.5086,7.4964
|
|
658
|
-
A76.78,76.78,0,1,1,7.
|
|
659
|
-
A6,6,0,0,1,14.
|
|
660
|
-
L14.
|
|
661
|
-
A6,6,0,0,1,19.
|
|
640
|
+
A76.78,76.78,0,1,1,7.5875,76.497
|
|
641
|
+
A6,6,0,0,1,14.6492,71.1833
|
|
642
|
+
L14.6492,71.1833
|
|
643
|
+
A6,6,0,0,1,19.53,77.6697
|
|
662
644
|
A64.78,64.78,0,1,0,89.4914,19.4532
|
|
663
645
|
A6,6,0,0,1,84,13.4748Z">
|
|
664
646
|
</path>
|
|
@@ -774,10 +756,10 @@ const data = [
|
|
|
774
756
|
<g class="recharts-layer">
|
|
775
757
|
<path name="Ranking" color="brand-success" cx="84" cy="84" fill="#5cb85c " class="recharts-sector recharts-radial-bar-sector undefined" d="M 19.1954,121.4149
|
|
776
758
|
A3,3,0,0,1,15.0393,120.2116
|
|
777
|
-
A77.89,77.89,0,0,1,107.
|
|
778
|
-
A3,3,0,0,1,109.
|
|
779
|
-
L109.
|
|
780
|
-
A3,3,0,0,1,
|
|
759
|
+
A77.89,77.89,0,0,1,107.9912,9.8969
|
|
760
|
+
A3,3,0,0,1,109.882,13.7887
|
|
761
|
+
L109.882,13.7887
|
|
762
|
+
A3,3,0,0,1,106.1431,15.6052
|
|
781
763
|
A71.89,71.89,0,0,0,20.3515,117.4221
|
|
782
764
|
A3,3,0,0,1,19.1954,121.4149Z">
|
|
783
765
|
</path>
|
|
@@ -915,24 +897,6 @@ Lorem ipsum
|
|
|
915
897
|
Lorem ipsum dolor sit amet
|
|
916
898
|
67
|
|
917
899
|
|
|
918
|
-
#### Summary
|
|
919
|
-
|
|
920
|
-
Full circle RadialBarChart with custom text
|
|
921
|
-
|
|
922
|
-
Fuel level
|
|
923
|
-
24%
|
|
924
|
-
|
|
925
|
-
Charge level
|
|
926
|
-
38%
|
|
927
|
-
|
|
928
|
-
Open RadialBarChart with custom text
|
|
929
|
-
|
|
930
|
-
Lorem ipsum
|
|
931
|
-
80
|
|
932
|
-
|
|
933
|
-
Lorem ipsum dolor sit amet
|
|
934
|
-
67
|
|
935
|
-
|
|
936
900
|
#### React (tsx)
|
|
937
901
|
|
|
938
902
|
```tsx
|
|
@@ -1600,23 +1564,7 @@ const loremIpsum2 = {
|
|
|
1600
1564
|
|
|
1601
1565
|
### Example: Example 4
|
|
1602
1566
|
|
|
1603
|
-
Example for error
|
|
1604
|
-
|
|
1605
|
-
43%
|
|
1606
|
-
|
|
1607
|
-
App
|
|
1608
|
-
|
|
1609
|
-
37%
|
|
1610
|
-
|
|
1611
|
-
Website
|
|
1612
|
-
|
|
1613
|
-
20%
|
|
1614
|
-
|
|
1615
|
-
Server Connection
|
|
1616
|
-
|
|
1617
|
-
#### Summary
|
|
1618
|
-
|
|
1619
|
-
Example for error visualizationMost reported problems
|
|
1567
|
+
Example for error visualization Most reported problems
|
|
1620
1568
|
|
|
1621
1569
|
43%
|
|
1622
1570
|
|
|
@@ -2123,16 +2071,6 @@ Fuel level
|
|
|
2123
2071
|
Charge level
|
|
2124
2072
|
38%
|
|
2125
2073
|
|
|
2126
|
-
#### Summary
|
|
2127
|
-
|
|
2128
|
-
RadialBarChart with a needle
|
|
2129
|
-
|
|
2130
|
-
Fuel level
|
|
2131
|
-
24%
|
|
2132
|
-
|
|
2133
|
-
Charge level
|
|
2134
|
-
38%
|
|
2135
|
-
|
|
2136
2074
|
#### React (tsx)
|
|
2137
2075
|
|
|
2138
2076
|
```tsx
|
|
@@ -2682,22 +2620,6 @@ Lorem ipsum dolor sit amet
|
|
|
2682
2620
|
Final Step
|
|
2683
2621
|
Lorem ipsum dolor sit amet
|
|
2684
2622
|
|
|
2685
|
-
#### Summary
|
|
2686
|
-
|
|
2687
|
-
Circle RadialBarChart as progress steps
|
|
2688
|
-
|
|
2689
|
-
Not Started
|
|
2690
|
-
Lorem ipsum dolor sit amet
|
|
2691
|
-
|
|
2692
|
-
Initial Step
|
|
2693
|
-
Lorem ipsum dolor sit amet
|
|
2694
|
-
|
|
2695
|
-
Second Step
|
|
2696
|
-
Lorem ipsum dolor sit amet
|
|
2697
|
-
|
|
2698
|
-
Final Step
|
|
2699
|
-
Lorem ipsum dolor sit amet
|
|
2700
|
-
|
|
2701
2623
|
#### React (tsx)
|
|
2702
2624
|
|
|
2703
2625
|
```tsx
|
|
@@ -3432,13 +3354,7 @@ const thirdStep = {
|
|
|
3432
3354
|
|
|
3433
3355
|
### Example: Example 7
|
|
3434
3356
|
|
|
3435
|
-
RadialBarChart with changing
|
|
3436
|
-
|
|
3437
|
-
Start
|
|
3438
|
-
|
|
3439
|
-
#### Summary
|
|
3440
|
-
|
|
3441
|
-
RadialBarChart with changing data1%
|
|
3357
|
+
RadialBarChart with changing data 1%
|
|
3442
3358
|
|
|
3443
3359
|
Start
|
|
3444
3360
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/radioCardGroup
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:12.386Z
|
|
7
7
|
|
|
8
8
|
Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.
|
|
9
9
|
|
|
@@ -11,7 +11,7 @@ Card-based radio selection built on top of RadioButton. Supports options-based u
|
|
|
11
11
|
|
|
12
12
|
### Example: This option is a first option
|
|
13
13
|
|
|
14
|
-
Inline
|
|
14
|
+
Inline cards Option 1
|
|
15
15
|
This option is a first option
|
|
16
16
|
|
|
17
17
|
Option 2
|
|
@@ -20,13 +20,13 @@ This option is a second option
|
|
|
20
20
|
Option 3
|
|
21
21
|
This option is a third option
|
|
22
22
|
|
|
23
|
-
Stacked horizontal
|
|
23
|
+
Stacked horizontal cards Lorem ipsum
|
|
24
24
|
|
|
25
25
|
Dolor sit amet
|
|
26
26
|
|
|
27
27
|
Qui repellat dolores
|
|
28
28
|
|
|
29
|
-
Stacked
|
|
29
|
+
Stacked cards Option 1
|
|
30
30
|
This option is a first option
|
|
31
31
|
|
|
32
32
|
Option 2 (disabled)
|
|
@@ -38,38 +38,7 @@ This option is a third option
|
|
|
38
38
|
Option 4
|
|
39
39
|
This option is a forth option
|
|
40
40
|
|
|
41
|
-
Reset
|
|
42
|
-
|
|
43
|
-
#### Summary
|
|
44
|
-
|
|
45
|
-
Inline cardsOption 1
|
|
46
|
-
This option is a first option
|
|
47
|
-
|
|
48
|
-
Option 2
|
|
49
|
-
This option is a second option
|
|
50
|
-
|
|
51
|
-
Option 3
|
|
52
|
-
This option is a third option
|
|
53
|
-
|
|
54
|
-
Stacked horizontal cardsLorem ipsum
|
|
55
|
-
|
|
56
|
-
Dolor sit amet
|
|
57
|
-
|
|
58
|
-
Qui repellat dolores
|
|
59
|
-
|
|
60
|
-
Stacked cardsOption 1
|
|
61
|
-
This option is a first option
|
|
62
|
-
|
|
63
|
-
Option 2 (disabled)
|
|
64
|
-
This option is a second option
|
|
65
|
-
|
|
66
|
-
Option 3
|
|
67
|
-
This option is a third option
|
|
68
|
-
|
|
69
|
-
Option 4
|
|
70
|
-
This option is a forth option
|
|
71
|
-
|
|
72
|
-
Reset selectionUnselect
|
|
41
|
+
Reset selection Unselect
|
|
73
42
|
|
|
74
43
|
#### React (tsx)
|
|
75
44
|
|
|
@@ -342,18 +311,7 @@ export default () => {
|
|
|
342
311
|
|
|
343
312
|
### Example: This option is a first option
|
|
344
313
|
|
|
345
|
-
Compound API with mapped
|
|
346
|
-
This option is a first option
|
|
347
|
-
|
|
348
|
-
Option 2
|
|
349
|
-
This option is a second option
|
|
350
|
-
|
|
351
|
-
Option 3
|
|
352
|
-
This option is a third option
|
|
353
|
-
|
|
354
|
-
#### Summary
|
|
355
|
-
|
|
356
|
-
Compound API with mapped itemsOption 1
|
|
314
|
+
Compound API with mapped items Option 1
|
|
357
315
|
This option is a first option
|
|
358
316
|
|
|
359
317
|
Option 2
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/radiobutton
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:15.818Z
|
|
7
7
|
|
|
8
8
|
NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.
|
|
9
9
|
|
|
@@ -14,17 +14,9 @@ NoteWhen using the custom option, make sure to wrap the children with the class
|
|
|
14
14
|
Option one is selected by default
|
|
15
15
|
Option two can be something else and selecting it will deselect option one
|
|
16
16
|
Option three is disabled
|
|
17
|
-
123
|
|
18
|
-
Km
|
|
19
|
-
Miles
|
|
20
|
-
Last selected option: nothing selected yet
|
|
21
17
|
|
|
22
|
-
|
|
18
|
+
1 2 3
|
|
23
19
|
|
|
24
|
-
Option one is selected by default
|
|
25
|
-
Option two can be something else and selecting it will deselect option one
|
|
26
|
-
Option three is disabled
|
|
27
|
-
123
|
|
28
20
|
Km
|
|
29
21
|
Miles
|
|
30
22
|
Last selected option: nothing selected yet
|
|
@@ -193,11 +185,7 @@ export default () => {
|
|
|
193
185
|
|
|
194
186
|
### Example: Example 2
|
|
195
187
|
|
|
196
|
-
Option
|
|
197
|
-
|
|
198
|
-
#### Summary
|
|
199
|
-
|
|
200
|
-
Option 1Option 2Option 3
|
|
188
|
+
Option 1 Option 2 Option 3
|
|
201
189
|
|
|
202
190
|
#### React (tsx)
|
|
203
191
|
|
|
@@ -278,13 +266,7 @@ export default () => {
|
|
|
278
266
|
|
|
279
267
|
### Example: Example 3
|
|
280
268
|
|
|
281
|
-
Please contact me
|
|
282
|
-
Submit selectionSelected value-
|
|
283
|
-
|
|
284
|
-
#### Summary
|
|
285
|
-
|
|
286
|
-
Please contact me viaEmailPhone
|
|
287
|
-
Submit selectionSelected value-
|
|
269
|
+
Please contact me via Email Phone Submit selection Selected value -
|
|
288
270
|
|
|
289
271
|
#### React (tsx)
|
|
290
272
|
|
|
@@ -399,17 +381,6 @@ This option is a second option
|
|
|
399
381
|
Option 3
|
|
400
382
|
This option is a third option
|
|
401
383
|
|
|
402
|
-
#### Summary
|
|
403
|
-
|
|
404
|
-
Option 1
|
|
405
|
-
This option is a first option
|
|
406
|
-
|
|
407
|
-
Option 2
|
|
408
|
-
This option is a second option
|
|
409
|
-
|
|
410
|
-
Option 3
|
|
411
|
-
This option is a third option
|
|
412
|
-
|
|
413
384
|
#### React (tsx)
|
|
414
385
|
|
|
415
386
|
```tsx
|
|
@@ -552,17 +523,6 @@ This option is a second option
|
|
|
552
523
|
Option 3
|
|
553
524
|
This option is a third option
|
|
554
525
|
|
|
555
|
-
#### Summary
|
|
556
|
-
|
|
557
|
-
Option 1
|
|
558
|
-
This option is a first option
|
|
559
|
-
|
|
560
|
-
Option 2 (disabled)
|
|
561
|
-
This option is a second option
|
|
562
|
-
|
|
563
|
-
Option 3
|
|
564
|
-
This option is a third option
|
|
565
|
-
|
|
566
526
|
#### React (tsx)
|
|
567
527
|
|
|
568
528
|
```tsx
|
|
@@ -710,17 +670,6 @@ Bus
|
|
|
710
670
|
|
|
711
671
|
Van
|
|
712
672
|
|
|
713
|
-
#### Summary
|
|
714
|
-
|
|
715
|
-
Vehicle type
|
|
716
|
-
Truck
|
|
717
|
-
|
|
718
|
-
Trailer
|
|
719
|
-
|
|
720
|
-
Bus
|
|
721
|
-
|
|
722
|
-
Van
|
|
723
|
-
|
|
724
673
|
#### React (tsx)
|
|
725
674
|
|
|
726
675
|
```tsx
|
|
@@ -866,14 +815,6 @@ export default () => {
|
|
|
866
815
|
32 GB
|
|
867
816
|
64 GB
|
|
868
817
|
|
|
869
|
-
#### Summary
|
|
870
|
-
|
|
871
|
-
4 GB
|
|
872
|
-
8 GB
|
|
873
|
-
16 GB
|
|
874
|
-
32 GB
|
|
875
|
-
64 GB
|
|
876
|
-
|
|
877
818
|
#### React (tsx)
|
|
878
819
|
|
|
879
820
|
```tsx
|
|
@@ -995,20 +936,10 @@ export default () => {
|
|
|
995
936
|
|
|
996
937
|
### Example:
|
|
997
938
|
|
|
998
|
-
|
|
999
|
-
TruckBusVanTrailer
|
|
1000
|
-
6 Month
|
|
1001
|
-
|
|
1002
|
-
12 Month
|
|
1003
|
-
Save 15%
|
|
1004
|
-
|
|
1005
|
-
24 Month
|
|
1006
|
-
Save 25%
|
|
939
|
+
Truck Bus Trailer
|
|
1007
940
|
|
|
1008
|
-
|
|
941
|
+
Truck Bus Van Trailer
|
|
1009
942
|
|
|
1010
|
-
TruckBusTrailer
|
|
1011
|
-
TruckBusVanTrailer
|
|
1012
943
|
6 Month
|
|
1013
944
|
|
|
1014
945
|
12 Month
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/releaseNotes
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:03.494Z
|
|
7
7
|
|
|
8
8
|
Component to render release notes in a standardized manner.
|
|
9
9
|
|
|
@@ -11,7 +11,7 @@ Component to render release notes in a standardized manner.
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
1.1.
|
|
14
|
+
1.1.0 23.07.2018
|
|
15
15
|
|
|
16
16
|
Map view within the tour history table
|
|
17
17
|
• Modern map design as used in the Beta of the fleet monitor
|
|
@@ -19,25 +19,7 @@ Map view within the tour history table
|
|
|
19
19
|
• Event specific map marker
|
|
20
20
|
• Map size adjustable via slider
|
|
21
21
|
|
|
22
|
-
1.0.
|
|
23
|
-
|
|
24
|
-
New feature XYZ has been added ...
|
|
25
|
-
|
|
26
|
-
fixed bugs in ...
|
|
27
|
-
|
|
28
|
-
Another feature has been added
|
|
29
|
-
|
|
30
|
-
#### Summary
|
|
31
|
-
|
|
32
|
-
1.1.023.07.2018
|
|
33
|
-
|
|
34
|
-
Map view within the tour history table
|
|
35
|
-
• Modern map design as used in the Beta of the fleet monitor
|
|
36
|
-
• Works with all event types
|
|
37
|
-
• Event specific map marker
|
|
38
|
-
• Map size adjustable via slider
|
|
39
|
-
|
|
40
|
-
1.0.027.06.2018
|
|
22
|
+
1.0.0 27.06.2018
|
|
41
23
|
|
|
42
24
|
New feature XYZ has been added ...
|
|
43
25
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/resizer
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:05.715Z
|
|
7
7
|
|
|
8
8
|
A helper component to allow elements to resize.
|
|
9
9
|
|
|
@@ -17,12 +17,6 @@ Horizontal (default):
|
|
|
17
17
|
|
|
18
18
|
Vertical (with child element as handle):
|
|
19
19
|
|
|
20
|
-
#### Summary
|
|
21
|
-
|
|
22
|
-
Horizontal (default):
|
|
23
|
-
|
|
24
|
-
Vertical (with child element as handle):
|
|
25
|
-
|
|
26
20
|
#### React (tsx)
|
|
27
21
|
|
|
28
22
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/responsiveColumnStripe
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:46.362Z
|
|
7
7
|
|
|
8
8
|
The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.
|
|
9
9
|
|
|
@@ -30,66 +30,26 @@ ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation
|
|
|
30
30
|
Friday
|
|
31
31
|
14.01.2023
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
Shipments 4
|
|
34
|
+
Planned 0
|
|
35
35
|
|
|
36
36
|
Monday
|
|
37
37
|
17.01.2023
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
Shipments 4
|
|
40
|
+
Planned 0
|
|
41
41
|
|
|
42
42
|
Thuesday
|
|
43
43
|
18.01.2023
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
Shipments 4
|
|
46
|
+
Planned 0
|
|
47
47
|
|
|
48
48
|
Wednesday
|
|
49
49
|
19.01.2023
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
#### Summary
|
|
55
|
-
|
|
56
|
-
ResponsiveColumnStripe with minColumns 2 and maxColumns 5
|
|
57
|
-
Item 1
|
|
58
|
-
Item 2
|
|
59
|
-
Item 3
|
|
60
|
-
Item 4
|
|
61
|
-
Item 5
|
|
62
|
-
|
|
63
|
-
ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4
|
|
64
|
-
Item 1
|
|
65
|
-
Item 2
|
|
66
|
-
Item 3
|
|
67
|
-
Item 4
|
|
68
|
-
|
|
69
|
-
ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation
|
|
70
|
-
Friday
|
|
71
|
-
14.01.2023
|
|
72
|
-
|
|
73
|
-
Shipments4
|
|
74
|
-
Planned0
|
|
75
|
-
|
|
76
|
-
Monday
|
|
77
|
-
17.01.2023
|
|
78
|
-
|
|
79
|
-
Shipments4
|
|
80
|
-
Planned0
|
|
81
|
-
|
|
82
|
-
Thuesday
|
|
83
|
-
18.01.2023
|
|
84
|
-
|
|
85
|
-
Shipments4
|
|
86
|
-
Planned0
|
|
87
|
-
|
|
88
|
-
Wednesday
|
|
89
|
-
19.01.2023
|
|
90
|
-
|
|
91
|
-
Shipments4
|
|
92
|
-
Planned0
|
|
51
|
+
Shipments 4
|
|
52
|
+
Planned 0
|
|
93
53
|
|
|
94
54
|
#### React (tsx)
|
|
95
55
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/responsiveVideo
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:04.595Z
|
|
7
7
|
|
|
8
8
|
## Responsive Video
|
|
9
9
|
|
|
@@ -13,12 +13,6 @@ Responsive Video 16x9
|
|
|
13
13
|
|
|
14
14
|
Responsive Video 4x3
|
|
15
15
|
|
|
16
|
-
#### Summary
|
|
17
|
-
|
|
18
|
-
Responsive Video 16x9
|
|
19
|
-
|
|
20
|
-
Responsive Video 4x3
|
|
21
|
-
|
|
22
16
|
#### React (tsx)
|
|
23
17
|
|
|
24
18
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/rioglyph
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:05.353Z
|
|
7
7
|
|
|
8
8
|
The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.
|
|
9
9
|
|
|
@@ -29,22 +29,6 @@ Disabled styling
|
|
|
29
29
|
|
|
30
30
|
Custom external svg icon
|
|
31
31
|
|
|
32
|
-
#### Summary
|
|
33
|
-
|
|
34
|
-
Single rioglyph icon
|
|
35
|
-
|
|
36
|
-
Single rioglyph icon with custom styles
|
|
37
|
-
|
|
38
|
-
Single rioglyph icon with spinning animation
|
|
39
|
-
|
|
40
|
-
Single rioglyph icon with pulsing animation
|
|
41
|
-
|
|
42
|
-
Paired rioglyph icon
|
|
43
|
-
|
|
44
|
-
Disabled styling
|
|
45
|
-
|
|
46
|
-
Custom external svg icon
|
|
47
|
-
|
|
48
32
|
#### React (tsx)
|
|
49
33
|
|
|
50
34
|
```tsx
|