@rio-cloud/uikit-mcp 1.1.6 → 1.1.8
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 +13 -17
- 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 +3 -31
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +36 -172
- 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 +141 -374
- 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 +9 -77
- 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 +48 -106
- 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 +3412 -5600
- 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 +8 -65
- 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 +7 -38
- 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 +57 -123
- package/dist/docs/foundations.md +753 -4073
- package/dist/docs/start/changelog.md +793 -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 +75 -120
- 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 -10
- package/dist/version.json +2 -2
- package/package.json +2 -2
- 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:* Application
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/appLayout
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:01.158Z
|
|
7
7
|
|
|
8
8
|
The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
|
|
9
9
|
|
|
@@ -25,14 +25,6 @@ Navigation 1
|
|
|
25
25
|
Navigation 2
|
|
26
26
|
Navigation 3
|
|
27
27
|
|
|
28
|
-
#### Summary
|
|
29
|
-
|
|
30
|
-
RIO Service
|
|
31
|
-
|
|
32
|
-
Navigation 1
|
|
33
|
-
Navigation 2
|
|
34
|
-
Navigation 3
|
|
35
|
-
|
|
36
28
|
#### React (tsx)
|
|
37
29
|
|
|
38
30
|
```tsx
|
|
@@ -220,18 +212,6 @@ Subnavigation 1
|
|
|
220
212
|
Subnavigation 2
|
|
221
213
|
Subnavigation 3
|
|
222
214
|
|
|
223
|
-
#### Summary
|
|
224
|
-
|
|
225
|
-
RIO Service
|
|
226
|
-
|
|
227
|
-
Navigation 1
|
|
228
|
-
Navigation 2
|
|
229
|
-
Navigation 3
|
|
230
|
-
|
|
231
|
-
Subnavigation 1
|
|
232
|
-
Subnavigation 2
|
|
233
|
-
Subnavigation 3
|
|
234
|
-
|
|
235
215
|
#### React (tsx)
|
|
236
216
|
|
|
237
217
|
```tsx
|
|
@@ -495,16 +475,6 @@ Navigation 3
|
|
|
495
475
|
|
|
496
476
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
|
|
497
477
|
|
|
498
|
-
#### Summary
|
|
499
|
-
|
|
500
|
-
RIO Service
|
|
501
|
-
|
|
502
|
-
Navigation 1
|
|
503
|
-
Navigation 2
|
|
504
|
-
Navigation 3
|
|
505
|
-
|
|
506
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
|
|
507
|
-
|
|
508
478
|
#### React (tsx)
|
|
509
479
|
|
|
510
480
|
```tsx
|
|
@@ -699,16 +669,6 @@ Navigation 3
|
|
|
699
669
|
|
|
700
670
|
Button
|
|
701
671
|
|
|
702
|
-
#### Summary
|
|
703
|
-
|
|
704
|
-
RIO Service
|
|
705
|
-
|
|
706
|
-
Navigation 1
|
|
707
|
-
Navigation 2
|
|
708
|
-
Navigation 3
|
|
709
|
-
|
|
710
|
-
Button
|
|
711
|
-
|
|
712
672
|
#### React (tsx)
|
|
713
673
|
|
|
714
674
|
```tsx
|
|
@@ -911,20 +871,6 @@ Sidebar components may be added here...
|
|
|
911
871
|
|
|
912
872
|
Button
|
|
913
873
|
|
|
914
|
-
#### Summary
|
|
915
|
-
|
|
916
|
-
RIO Service
|
|
917
|
-
|
|
918
|
-
Navigation 1
|
|
919
|
-
Navigation 2
|
|
920
|
-
Navigation 3
|
|
921
|
-
|
|
922
|
-
Sidebar Right
|
|
923
|
-
|
|
924
|
-
Sidebar components may be added here...
|
|
925
|
-
|
|
926
|
-
Button
|
|
927
|
-
|
|
928
874
|
#### React (tsx)
|
|
929
875
|
|
|
930
876
|
```tsx
|
|
@@ -1156,71 +1102,19 @@ Navigation 3
|
|
|
1156
1102
|
4
|
|
1157
1103
|
|
|
1158
1104
|
2
|
|
1159
|
-
5
|
|
1160
|
-
4
|
|
1161
|
-
3
|
|
1162
|
-
|
|
1163
|
-
Asset Group8
|
|
1164
|
-
Vehicle-2026Asset 1005
|
|
1165
|
-
Vehicle-2510Asset 1013
|
|
1166
|
-
Vehicle-3097Asset 1000
|
|
1167
|
-
Vehicle-4057Asset 1006
|
|
1168
|
-
Vehicle-5409Asset 1009
|
|
1169
|
-
Vehicle-6612Asset 1012
|
|
1170
|
-
Vehicle-8140Asset 1011
|
|
1171
|
-
Vehicle-8303Asset 1007
|
|
1172
|
-
|
|
1173
|
-
Ungrouped6
|
|
1174
|
-
|
|
1175
|
-
200
|
|
1176
|
-
|
|
1177
|
-
Sidebar Right
|
|
1178
|
-
|
|
1179
|
-
Sidebar components may be added here...
|
|
1180
|
-
|
|
1181
|
-
Close
|
|
1182
|
-
|
|
1183
|
-
Subnavigation 1
|
|
1184
|
-
Subnavigation 2
|
|
1185
|
-
Subnavigation 3
|
|
1186
|
-
|
|
1187
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
|
|
1188
|
-
Sample Service Content
|
|
1189
|
-
Open Sidebar
|
|
1190
|
-
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.
|
|
1191
|
-
|
|
1192
|
-
In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
|
|
1193
|
-
|
|
1194
|
-
Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
|
|
1195
|
-
|
|
1196
|
-
Bottom Button
|
|
1197
|
-
|
|
1198
|
-
#### Summary
|
|
1199
|
-
|
|
1200
|
-
RIO Service
|
|
1201
|
-
|
|
1202
|
-
Navigation 1
|
|
1203
|
-
Navigation 2
|
|
1204
|
-
Navigation 3
|
|
1205
|
-
|
|
1206
|
-
4
|
|
1207
|
-
|
|
1208
1105
|
2
|
|
1209
|
-
5
|
|
1210
1106
|
4
|
|
1211
|
-
|
|
1107
|
+
4
|
|
1212
1108
|
|
|
1213
|
-
Asset
|
|
1214
|
-
Vehicle-
|
|
1215
|
-
Vehicle-
|
|
1216
|
-
Vehicle-
|
|
1217
|
-
Vehicle-
|
|
1218
|
-
Vehicle-
|
|
1219
|
-
Vehicle-
|
|
1220
|
-
Vehicle-8140Asset 1011
|
|
1221
|
-
Vehicle-8303Asset 1007
|
|
1109
|
+
Asset Group 6
|
|
1110
|
+
Vehicle-5041 Asset 1011
|
|
1111
|
+
Vehicle-5745 Asset 1000
|
|
1112
|
+
Vehicle-7271 Asset 1010
|
|
1113
|
+
Vehicle-7422 Asset 1005
|
|
1114
|
+
Vehicle-7892 Asset 1008
|
|
1115
|
+
Vehicle-8559 Asset 1001
|
|
1222
1116
|
|
|
1223
|
-
|
|
1117
|
+
Ungrouped 6
|
|
1224
1118
|
|
|
1225
1119
|
200
|
|
1226
1120
|
|
|
@@ -1706,14 +1600,14 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1706
1600
|
<div class="display-flex justify-content-between align-items-start width-100pct">
|
|
1707
1601
|
<div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
|
|
1708
1602
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1709
|
-
<span class="rioglyph rioglyph-
|
|
1603
|
+
<span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
|
|
1710
1604
|
</span>
|
|
1711
1605
|
<span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
|
|
1712
1606
|
</div>
|
|
1713
1607
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1714
|
-
<span class="rioglyph rioglyph-
|
|
1608
|
+
<span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
|
|
1715
1609
|
</span>
|
|
1716
|
-
<span class="TreeLabelCount label label-condensed label-muted label-filled">
|
|
1610
|
+
<span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
|
|
1717
1611
|
</div>
|
|
1718
1612
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1719
1613
|
<span class="rioglyph rioglyph-van text-size-16 margin-right-2">
|
|
@@ -1721,9 +1615,9 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1721
1615
|
<span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
|
|
1722
1616
|
</div>
|
|
1723
1617
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1724
|
-
<span class="rioglyph rioglyph-
|
|
1618
|
+
<span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
|
|
1725
1619
|
</span>
|
|
1726
|
-
<span class="TreeLabelCount label label-condensed label-muted label-filled">
|
|
1620
|
+
<span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
|
|
1727
1621
|
</div>
|
|
1728
1622
|
</div>
|
|
1729
1623
|
</div>
|
|
@@ -1741,38 +1635,23 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1741
1635
|
<span class="TreeLabelNameText">
|
|
1742
1636
|
<span class="TreeLabelNameTextHeadline">Asset Group</span>
|
|
1743
1637
|
</span>
|
|
1744
|
-
<span class="TreeLabelCount label label-muted label-filled label-condensed">
|
|
1638
|
+
<span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
|
|
1745
1639
|
<span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
|
|
1746
1640
|
</span>
|
|
1747
1641
|
</span>
|
|
1748
1642
|
</div>
|
|
1749
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-
|
|
1750
|
-
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1751
|
-
<input type="checkbox" class="TreeCheckbox">
|
|
1752
|
-
<span class="checkbox-text">
|
|
1753
|
-
</span>
|
|
1754
|
-
</label>
|
|
1755
|
-
<span class="TreeLabel TreeLabelName">
|
|
1756
|
-
<span class="rioglyph rioglyph-bus">
|
|
1757
|
-
</span>
|
|
1758
|
-
<span class="TreeLabelNameText">
|
|
1759
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-2026</span>
|
|
1760
|
-
<span class="TreeLabelNameTextSubline">Asset 1005</span>
|
|
1761
|
-
</span>
|
|
1762
|
-
</span>
|
|
1763
|
-
</div>
|
|
1764
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
|
|
1643
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
|
|
1765
1644
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1766
1645
|
<input type="checkbox" class="TreeCheckbox">
|
|
1767
1646
|
<span class="checkbox-text">
|
|
1768
1647
|
</span>
|
|
1769
1648
|
</label>
|
|
1770
1649
|
<span class="TreeLabel TreeLabelName">
|
|
1771
|
-
<span class="rioglyph rioglyph-
|
|
1650
|
+
<span class="rioglyph rioglyph-van">
|
|
1772
1651
|
</span>
|
|
1773
1652
|
<span class="TreeLabelNameText">
|
|
1774
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1775
|
-
<span class="TreeLabelNameTextSubline">Asset
|
|
1653
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-5041</span>
|
|
1654
|
+
<span class="TreeLabelNameTextSubline">Asset 1011</span>
|
|
1776
1655
|
</span>
|
|
1777
1656
|
</span>
|
|
1778
1657
|
</div>
|
|
@@ -1783,30 +1662,30 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1783
1662
|
</span>
|
|
1784
1663
|
</label>
|
|
1785
1664
|
<span class="TreeLabel TreeLabelName">
|
|
1786
|
-
<span class="rioglyph rioglyph-
|
|
1665
|
+
<span class="rioglyph rioglyph-bus">
|
|
1787
1666
|
</span>
|
|
1788
1667
|
<span class="TreeLabelNameText">
|
|
1789
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1668
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-5745</span>
|
|
1790
1669
|
<span class="TreeLabelNameTextSubline">Asset 1000</span>
|
|
1791
1670
|
</span>
|
|
1792
1671
|
</span>
|
|
1793
1672
|
</div>
|
|
1794
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-
|
|
1673
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
|
|
1795
1674
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1796
1675
|
<input type="checkbox" class="TreeCheckbox">
|
|
1797
1676
|
<span class="checkbox-text">
|
|
1798
1677
|
</span>
|
|
1799
1678
|
</label>
|
|
1800
1679
|
<span class="TreeLabel TreeLabelName">
|
|
1801
|
-
<span class="rioglyph rioglyph-
|
|
1680
|
+
<span class="rioglyph rioglyph-bus">
|
|
1802
1681
|
</span>
|
|
1803
1682
|
<span class="TreeLabelNameText">
|
|
1804
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1805
|
-
<span class="TreeLabelNameTextSubline">Asset
|
|
1683
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-7271</span>
|
|
1684
|
+
<span class="TreeLabelNameTextSubline">Asset 1010</span>
|
|
1806
1685
|
</span>
|
|
1807
1686
|
</span>
|
|
1808
1687
|
</div>
|
|
1809
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-
|
|
1688
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
|
|
1810
1689
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1811
1690
|
<input type="checkbox" class="TreeCheckbox">
|
|
1812
1691
|
<span class="checkbox-text">
|
|
@@ -1816,12 +1695,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1816
1695
|
<span class="rioglyph rioglyph-truck">
|
|
1817
1696
|
</span>
|
|
1818
1697
|
<span class="TreeLabelNameText">
|
|
1819
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1820
|
-
<span class="TreeLabelNameTextSubline">Asset
|
|
1698
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-7422</span>
|
|
1699
|
+
<span class="TreeLabelNameTextSubline">Asset 1005</span>
|
|
1821
1700
|
</span>
|
|
1822
1701
|
</span>
|
|
1823
1702
|
</div>
|
|
1824
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-
|
|
1703
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
|
|
1825
1704
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1826
1705
|
<input type="checkbox" class="TreeCheckbox">
|
|
1827
1706
|
<span class="checkbox-text">
|
|
@@ -1831,38 +1710,23 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1831
1710
|
<span class="rioglyph rioglyph-truck">
|
|
1832
1711
|
</span>
|
|
1833
1712
|
<span class="TreeLabelNameText">
|
|
1834
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1835
|
-
<span class="TreeLabelNameTextSubline">Asset
|
|
1713
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-7892</span>
|
|
1714
|
+
<span class="TreeLabelNameTextSubline">Asset 1008</span>
|
|
1836
1715
|
</span>
|
|
1837
1716
|
</span>
|
|
1838
1717
|
</div>
|
|
1839
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-
|
|
1840
|
-
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1841
|
-
<input type="checkbox" class="TreeCheckbox">
|
|
1842
|
-
<span class="checkbox-text">
|
|
1843
|
-
</span>
|
|
1844
|
-
</label>
|
|
1845
|
-
<span class="TreeLabel TreeLabelName">
|
|
1846
|
-
<span class="rioglyph rioglyph-van">
|
|
1847
|
-
</span>
|
|
1848
|
-
<span class="TreeLabelNameText">
|
|
1849
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-8140</span>
|
|
1850
|
-
<span class="TreeLabelNameTextSubline">Asset 1011</span>
|
|
1851
|
-
</span>
|
|
1852
|
-
</span>
|
|
1853
|
-
</div>
|
|
1854
|
-
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
|
|
1718
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
|
|
1855
1719
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1856
1720
|
<input type="checkbox" class="TreeCheckbox">
|
|
1857
1721
|
<span class="checkbox-text">
|
|
1858
1722
|
</span>
|
|
1859
1723
|
</label>
|
|
1860
1724
|
<span class="TreeLabel TreeLabelName">
|
|
1861
|
-
<span class="rioglyph rioglyph-
|
|
1725
|
+
<span class="rioglyph rioglyph-trailer">
|
|
1862
1726
|
</span>
|
|
1863
1727
|
<span class="TreeLabelNameText">
|
|
1864
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1865
|
-
<span class="TreeLabelNameTextSubline">Asset
|
|
1728
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-8559</span>
|
|
1729
|
+
<span class="TreeLabelNameTextSubline">Asset 1001</span>
|
|
1866
1730
|
</span>
|
|
1867
1731
|
</span>
|
|
1868
1732
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Navigation
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/appNavigationBar
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:03.877Z
|
|
7
7
|
|
|
8
8
|
## AppNavigationBar
|
|
9
9
|
|
|
@@ -11,10 +11,6 @@
|
|
|
11
11
|
|
|
12
12
|
Title of content
|
|
13
13
|
|
|
14
|
-
#### Summary
|
|
15
|
-
|
|
16
|
-
Title of content
|
|
17
|
-
|
|
18
14
|
#### React (tsx)
|
|
19
15
|
|
|
20
16
|
```tsx
|
|
@@ -66,10 +62,6 @@ export default () => (
|
|
|
66
62
|
|
|
67
63
|
Title of content
|
|
68
64
|
|
|
69
|
-
#### Summary
|
|
70
|
-
|
|
71
|
-
Title of content
|
|
72
|
-
|
|
73
65
|
#### React (tsx)
|
|
74
66
|
|
|
75
67
|
```tsx
|
|
@@ -141,13 +133,6 @@ Back
|
|
|
141
133
|
|
|
142
134
|
Title of content
|
|
143
135
|
|
|
144
|
-
#### Summary
|
|
145
|
-
|
|
146
|
-
With more space, a back button label can be shown
|
|
147
|
-
Back
|
|
148
|
-
|
|
149
|
-
Title of content
|
|
150
|
-
|
|
151
136
|
#### React (tsx)
|
|
152
137
|
|
|
153
138
|
```tsx
|
|
@@ -207,14 +192,6 @@ Back
|
|
|
207
192
|
Title of content
|
|
208
193
|
lorem ipsum dolor sit amet
|
|
209
194
|
|
|
210
|
-
#### Summary
|
|
211
|
-
|
|
212
|
-
In some cases a subtitle comes in handy
|
|
213
|
-
Back
|
|
214
|
-
|
|
215
|
-
Title of content
|
|
216
|
-
lorem ipsum dolor sit amet
|
|
217
|
-
|
|
218
195
|
#### React (tsx)
|
|
219
196
|
|
|
220
197
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/areaCharts
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:41:25.420Z
|
|
7
7
|
|
|
8
8
|
## AreaChart
|
|
9
9
|
|
|
@@ -13,13 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
Simple AreaChart
|
|
15
15
|
|
|
16
|
-
Page
|
|
17
|
-
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
Simple AreaChart
|
|
21
|
-
|
|
22
|
-
Page APage BPage CPage DPage EPage FPage G
|
|
16
|
+
Page A Page B Page C Page D Page E Page F Page G
|
|
23
17
|
|
|
24
18
|
#### React (tsx)
|
|
25
19
|
|
|
@@ -122,7 +116,7 @@ const data: CustomData[] = [
|
|
|
122
116
|
<g class="recharts-layer">
|
|
123
117
|
<defs>
|
|
124
118
|
<clipPath id="animationClipPath-recharts-area-:r0:">
|
|
125
|
-
<rect x="45" y="0" width="
|
|
119
|
+
<rect x="45" y="0" width="87.97882059780788" height="124">
|
|
126
120
|
</rect>
|
|
127
121
|
</clipPath>
|
|
128
122
|
</defs>
|
|
@@ -314,16 +308,7 @@ Multiple Areas in an AreaChart
|
|
|
314
308
|
AMT
|
|
315
309
|
UV
|
|
316
310
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
#### Summary
|
|
320
|
-
|
|
321
|
-
Multiple Areas in an AreaChart
|
|
322
|
-
|
|
323
|
-
AMT
|
|
324
|
-
UV
|
|
325
|
-
|
|
326
|
-
0900180027003600MaxPage APage BPage CPage DPage EPage FPage G
|
|
311
|
+
0 900 1800 2700 3600 Max Page A Page B Page C Page D Page E Page F Page G
|
|
327
312
|
|
|
328
313
|
#### React (tsx)
|
|
329
314
|
|
|
@@ -478,7 +463,7 @@ const data: CustomData[] = [
|
|
|
478
463
|
<div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
|
|
479
464
|
<div style="width: 0px; height: 0px; overflow: visible;">
|
|
480
465
|
<div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
|
|
481
|
-
<div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
|
|
466
|
+
<div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(440.844px, 186px);">
|
|
482
467
|
<div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
|
|
483
468
|
<p class="recharts-tooltip-label" style="margin: 0px;">
|
|
484
469
|
</p>
|
|
@@ -562,7 +547,7 @@ const data: CustomData[] = [
|
|
|
562
547
|
<g class="recharts-layer">
|
|
563
548
|
<defs>
|
|
564
549
|
<clipPath id="animationClipPath-recharts-area-:r1:">
|
|
565
|
-
<rect x="75" y="0" width="
|
|
550
|
+
<rect x="75" y="0" width="676.1772189894161" height="224">
|
|
566
551
|
</rect>
|
|
567
552
|
</clipPath>
|
|
568
553
|
</defs>
|
|
@@ -580,7 +565,7 @@ const data: CustomData[] = [
|
|
|
580
565
|
<g class="recharts-layer">
|
|
581
566
|
<defs>
|
|
582
567
|
<clipPath id="animationClipPath-recharts-area-:r2:">
|
|
583
|
-
<rect x="75" y="0" width="
|
|
568
|
+
<rect x="75" y="0" width="676.1772189894161" height="224">
|
|
584
569
|
</rect>
|
|
585
570
|
</clipPath>
|
|
586
571
|
</defs>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/aspectRatioPlaceholder
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:54.667Z
|
|
7
7
|
|
|
8
8
|
Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.
|
|
9
9
|
|
|
@@ -17,14 +17,6 @@ Custom (1/1)
|
|
|
17
17
|
|
|
18
18
|
Custom - same as image size (1000/600)
|
|
19
19
|
|
|
20
|
-
#### Summary
|
|
21
|
-
|
|
22
|
-
Default (16/9)
|
|
23
|
-
|
|
24
|
-
Custom (1/1)
|
|
25
|
-
|
|
26
|
-
Custom - same as image size (1000/600)
|
|
27
|
-
|
|
28
20
|
#### React (tsx)
|
|
29
21
|
|
|
30
22
|
```tsx
|