@rio-cloud/uikit-mcp 1.1.2 → 1.1.3
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/dist/doc-metadata.json +36 -46
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/animatedNumber.md +3 -3
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +31 -31
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +115 -47
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +5 -5
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +290 -182
- package/dist/docs/components/autosuggests.md +1 -1
- package/dist/docs/components/avatar.md +1 -1
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +14 -14
- package/dist/docs/components/barList.md +11 -11
- package/dist/docs/components/basicMap.md +7 -7
- package/dist/docs/components/bottomSheet.md +1 -1
- package/dist/docs/components/button.md +1 -1
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +103 -103
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +1 -1
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +4 -1
- package/dist/docs/components/checkbox.md +1 -1
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +2 -2
- package/dist/docs/components/composedCharts.md +15 -15
- package/dist/docs/components/contentLoader.md +101 -101
- package/dist/docs/components/dataTabs.md +8 -8
- package/dist/docs/components/datepickers.md +724 -724
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +4359 -4398
- package/dist/docs/components/editableContent.md +1 -1
- package/dist/docs/components/expander.md +1 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +2 -2
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +1 -1
- package/dist/docs/components/labeledElement.md +1 -1
- package/dist/docs/components/licensePlate.md +1 -1
- package/dist/docs/components/lineCharts.md +5 -5
- package/dist/docs/components/listMenu.md +1 -1
- package/dist/docs/components/loadMore.md +1 -1
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +3 -3
- package/dist/docs/components/mapCluster.md +5 -5
- package/dist/docs/components/mapContext.md +3 -3
- package/dist/docs/components/mapDraggableMarker.md +3 -3
- package/dist/docs/components/mapGettingStarted.md +1 -1
- package/dist/docs/components/mapInfoBubble.md +3 -3
- package/dist/docs/components/mapLayerGroup.md +3 -3
- package/dist/docs/components/mapMarker.md +3 -3
- package/dist/docs/components/mapPolygon.md +5 -5
- package/dist/docs/components/mapRoute.md +13 -13
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -11
- package/dist/docs/components/mapUtils.md +1 -1
- package/dist/docs/components/multiselects.md +1 -1
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +1 -1
- package/dist/docs/components/onboarding.md +1 -1
- package/dist/docs/components/page.md +1 -1
- package/dist/docs/components/pager.md +1 -1
- package/dist/docs/components/pieCharts.md +37 -69
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +25 -25
- package/dist/docs/components/radiobutton.md +1 -1
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +1 -1
- package/dist/docs/components/responsiveColumnStripe.md +1 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +1 -1
- package/dist/docs/components/saveableInput.md +277 -277
- package/dist/docs/components/selects.md +1 -1
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +1 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +1 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +1 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +1 -1
- package/dist/docs/components/subNavigation.md +1 -1
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +1 -1
- package/dist/docs/components/switch.md +1 -1
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +1 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +1 -1
- package/dist/docs/components/virtualList.md +69 -69
- package/dist/docs/foundations.md +167 -167
- package/dist/docs/start/changelog.md +1 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +1 -1
- 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 +2 -2
- 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 +81 -81
- 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 +1 -1
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/templates/common-table.md +11 -11
- package/dist/docs/templates/detail-views.md +2 -2
- package/dist/docs/templates/expandable-details.md +1 -1
- package/dist/docs/templates/feature-cards.md +55 -55
- package/dist/docs/templates/form-summary.md +22 -22
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +200 -200
- package/dist/docs/templates/loading-progress.md +3 -3
- package/dist/docs/templates/options-panel.md +1 -1
- package/dist/docs/templates/panel-variants.md +1 -1
- package/dist/docs/templates/progress-cards.md +1 -1
- package/dist/docs/templates/progress-success.md +1 -1
- package/dist/docs/templates/settings-form.md +23 -23
- package/dist/docs/templates/stats-blocks.md +16 -16
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/table-row-animation.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/routeUtils.md +1 -1
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +4 -4
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +1 -1
- package/dist/docs/utilities/useLocalStorage.md +1 -1
- package/dist/docs/utilities/useLocationSuggestions.md +1 -1
- package/dist/docs/utilities/useMax.md +1 -1
- package/dist/docs/utilities/useMin.md +1 -1
- package/dist/docs/utilities/useMutationObserver.md +1 -1
- package/dist/docs/utilities/useOnScreen.md +1 -1
- package/dist/docs/utilities/useOnlineStatus.md +1 -1
- package/dist/docs/utilities/usePostMessage.md +1 -57
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +1 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSorting.md +1 -1
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +51 -51
- package/dist/docs/utilities/useTableSelection.md +86 -86
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +8 -2
- package/dist/version.json +1 -1
- package/package.json +8 -8
- package/dist/docs/components/fullscreenMap.md +0 -10
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Selection
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/selects
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:27.918Z
|
|
7
7
|
|
|
8
8
|
The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Application
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/sidebar
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:05.927Z
|
|
7
7
|
|
|
8
8
|
There are 2 kinds of Sidebars. The default fluid and the fly variant.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Progress
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/statusBar
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:32.519Z
|
|
7
7
|
|
|
8
8
|
Flexible component to showcase various states based on progress bars.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/stepButton
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:15.961Z
|
|
7
7
|
|
|
8
8
|
The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/supportMarker
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:58.348Z
|
|
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
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/svgImage
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:59.734Z
|
|
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
|
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/tables
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:44.823Z
|
|
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:*
|
|
6
|
+
*Captured:* 2026-01-07T12:12:01.801Z
|
|
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
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/teaser
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:46.308Z
|
|
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
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/toggleButton
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:20.239Z
|
|
7
7
|
|
|
8
8
|
This toggle button is based on the button component that can be used directly.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/tooltip
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:12:02.752Z
|
|
7
7
|
|
|
8
8
|
In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/virtualList
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:47.861Z
|
|
7
7
|
|
|
8
8
|
The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.
|
|
9
9
|
|
|
@@ -14,68 +14,70 @@ It allows a specified number of items outside the viewport for smoother scrollin
|
|
|
14
14
|
### Example: Example 1
|
|
15
15
|
|
|
16
16
|
Virtual list with 100 itemsItem 1
|
|
17
|
-
|
|
17
|
+
Sed ac in vel et in ac
|
|
18
18
|
|
|
19
19
|
Item 2
|
|
20
|
-
|
|
20
|
+
Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
|
|
21
21
|
|
|
22
22
|
Item 3
|
|
23
|
-
|
|
23
|
+
Ac
|
|
24
|
+
Lorem orci, nec primis lorem
|
|
24
25
|
|
|
25
26
|
Item 4
|
|
26
|
-
|
|
27
|
+
Efficitur massa, iaculis. ligula nunc
|
|
27
28
|
|
|
28
29
|
Item 5
|
|
29
|
-
|
|
30
|
+
Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
|
|
30
31
|
|
|
31
32
|
Item 6
|
|
32
|
-
|
|
33
|
+
Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
|
|
33
34
|
|
|
34
35
|
Item 7
|
|
35
|
-
|
|
36
|
-
Lorem libero metus tortor ante In In
|
|
36
|
+
Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
|
|
37
37
|
|
|
38
38
|
Item 8
|
|
39
|
-
|
|
39
|
+
Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
|
|
40
40
|
|
|
41
41
|
Item 9
|
|
42
|
-
|
|
42
|
+
Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
|
|
43
43
|
|
|
44
44
|
Item 10
|
|
45
|
-
|
|
45
|
+
Ut ligula
|
|
46
|
+
Lorem lorem tortor primis libero
|
|
46
47
|
|
|
47
48
|
#### Summary
|
|
48
49
|
|
|
49
50
|
Virtual list with 100 itemsItem 1
|
|
50
|
-
|
|
51
|
+
Sed ac in vel et in ac
|
|
51
52
|
|
|
52
53
|
Item 2
|
|
53
|
-
|
|
54
|
+
Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,
|
|
54
55
|
|
|
55
56
|
Item 3
|
|
56
|
-
|
|
57
|
+
Ac
|
|
58
|
+
Lorem orci, nec primis lorem
|
|
57
59
|
|
|
58
60
|
Item 4
|
|
59
|
-
|
|
61
|
+
Efficitur massa, iaculis. ligula nunc
|
|
60
62
|
|
|
61
63
|
Item 5
|
|
62
|
-
|
|
64
|
+
Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc
|
|
63
65
|
|
|
64
66
|
Item 6
|
|
65
|
-
|
|
67
|
+
Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper
|
|
66
68
|
|
|
67
69
|
Item 7
|
|
68
|
-
|
|
69
|
-
Lorem libero metus tortor ante In In
|
|
70
|
+
Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed
|
|
70
71
|
|
|
71
72
|
Item 8
|
|
72
|
-
|
|
73
|
+
Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,
|
|
73
74
|
|
|
74
75
|
Item 9
|
|
75
|
-
|
|
76
|
+
Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat
|
|
76
77
|
|
|
77
78
|
Item 10
|
|
78
|
-
|
|
79
|
+
Ut ligula
|
|
80
|
+
Lorem lorem tortor primis libero
|
|
79
81
|
|
|
80
82
|
#### React (tsx)
|
|
81
83
|
|
|
@@ -128,62 +130,63 @@ export default () => {
|
|
|
128
130
|
<div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
|
|
129
131
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
130
132
|
<div class="text-medium" data-test-ignore="text">Item 1</div>
|
|
131
|
-
<div class="word-break" data-test-ignore="text">
|
|
133
|
+
<div class="word-break" data-test-ignore="text">Sed ac in vel et in ac</div>
|
|
132
134
|
</div>
|
|
133
135
|
</div>
|
|
134
136
|
<div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
|
|
135
137
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
136
138
|
<div class="text-medium" data-test-ignore="text">Item 2</div>
|
|
137
|
-
<div class="word-break" data-test-ignore="text">
|
|
139
|
+
<div class="word-break" data-test-ignore="text">Velit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,</div>
|
|
138
140
|
</div>
|
|
139
141
|
</div>
|
|
140
142
|
<div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
|
|
141
143
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
142
144
|
<div class="text-medium" data-test-ignore="text">Item 3</div>
|
|
143
|
-
<div class="word-break" data-test-ignore="text">
|
|
145
|
+
<div class="word-break" data-test-ignore="text">Ac
|
|
146
|
+
Lorem orci, nec primis lorem</div>
|
|
144
147
|
</div>
|
|
145
148
|
</div>
|
|
146
149
|
<div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
|
|
147
150
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
148
151
|
<div class="text-medium" data-test-ignore="text">Item 4</div>
|
|
149
|
-
<div class="word-break" data-test-ignore="text">
|
|
152
|
+
<div class="word-break" data-test-ignore="text">Efficitur massa, iaculis. ligula nunc</div>
|
|
150
153
|
</div>
|
|
151
154
|
</div>
|
|
152
155
|
<div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
|
|
153
156
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
154
157
|
<div class="text-medium" data-test-ignore="text">Item 5</div>
|
|
155
|
-
<div class="word-break" data-test-ignore="text">
|
|
158
|
+
<div class="word-break" data-test-ignore="text">Ac nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc</div>
|
|
156
159
|
</div>
|
|
157
160
|
</div>
|
|
158
161
|
<div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
|
|
159
162
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
160
163
|
<div class="text-medium" data-test-ignore="text">Item 6</div>
|
|
161
|
-
<div class="word-break" data-test-ignore="text">
|
|
164
|
+
<div class="word-break" data-test-ignore="text">Pretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper</div>
|
|
162
165
|
</div>
|
|
163
166
|
</div>
|
|
164
167
|
<div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
|
|
165
168
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
166
169
|
<div class="text-medium" data-test-ignore="text">Item 7</div>
|
|
167
|
-
<div class="word-break" data-test-ignore="text">
|
|
168
|
-
Lorem libero metus tortor ante In In</div>
|
|
170
|
+
<div class="word-break" data-test-ignore="text">Integer dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed</div>
|
|
169
171
|
</div>
|
|
170
172
|
</div>
|
|
171
173
|
<div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
|
|
172
174
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
173
175
|
<div class="text-medium" data-test-ignore="text">Item 8</div>
|
|
174
|
-
<div class="word-break" data-test-ignore="text">
|
|
176
|
+
<div class="word-break" data-test-ignore="text">Bibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,</div>
|
|
175
177
|
</div>
|
|
176
178
|
</div>
|
|
177
179
|
<div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
|
|
178
180
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
179
181
|
<div class="text-medium" data-test-ignore="text">Item 9</div>
|
|
180
|
-
<div class="word-break" data-test-ignore="text">
|
|
182
|
+
<div class="word-break" data-test-ignore="text">Et massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat</div>
|
|
181
183
|
</div>
|
|
182
184
|
</div>
|
|
183
185
|
<div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
|
|
184
186
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
185
187
|
<div class="text-medium" data-test-ignore="text">Item 10</div>
|
|
186
|
-
<div class="word-break" data-test-ignore="text">
|
|
188
|
+
<div class="word-break" data-test-ignore="text">Ut ligula
|
|
189
|
+
Lorem lorem tortor primis libero</div>
|
|
187
190
|
</div>
|
|
188
191
|
</div>
|
|
189
192
|
</div>
|
|
@@ -209,69 +212,67 @@ export default () => {
|
|
|
209
212
|
|
|
210
213
|
Virtual list with 5000 items
|
|
211
214
|
Vehicle 1
|
|
212
|
-
|
|
215
|
+
Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
|
|
213
216
|
|
|
214
217
|
Vehicle 2
|
|
215
|
-
|
|
218
|
+
Fringilla Fusce eget pharetra Vivamus
|
|
216
219
|
|
|
217
220
|
Vehicle 3
|
|
218
|
-
In
|
|
221
|
+
In felis. dui metus malesuada fames
|
|
219
222
|
|
|
220
223
|
Vehicle 4
|
|
221
|
-
|
|
224
|
+
Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
|
|
222
225
|
|
|
223
226
|
Vehicle 5
|
|
224
|
-
|
|
227
|
+
Ante Sed ligula dolor molestie
|
|
225
228
|
|
|
226
229
|
Vehicle 6
|
|
227
|
-
|
|
230
|
+
Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
|
|
228
231
|
|
|
229
232
|
Vehicle 7
|
|
230
|
-
|
|
233
|
+
Duis et Fusce vitae elit. est sit ac
|
|
231
234
|
|
|
232
235
|
Vehicle 8
|
|
233
|
-
|
|
236
|
+
Ut sagittis elementum adipiscing iaculis. iaculis.
|
|
234
237
|
|
|
235
238
|
Vehicle 9
|
|
236
|
-
|
|
237
|
-
Lorem ac pretium pharetra Vivamus
|
|
239
|
+
Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
|
|
238
240
|
|
|
239
241
|
Vehicle 10
|
|
240
|
-
|
|
242
|
+
Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
|
|
241
243
|
|
|
242
244
|
#### Summary
|
|
243
245
|
|
|
244
246
|
Virtual list with 5000 items
|
|
245
247
|
Vehicle 1
|
|
246
|
-
|
|
248
|
+
Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac
|
|
247
249
|
|
|
248
250
|
Vehicle 2
|
|
249
|
-
|
|
251
|
+
Fringilla Fusce eget pharetra Vivamus
|
|
250
252
|
|
|
251
253
|
Vehicle 3
|
|
252
|
-
In
|
|
254
|
+
In felis. dui metus malesuada fames
|
|
253
255
|
|
|
254
256
|
Vehicle 4
|
|
255
|
-
|
|
257
|
+
Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.
|
|
256
258
|
|
|
257
259
|
Vehicle 5
|
|
258
|
-
|
|
260
|
+
Ante Sed ligula dolor molestie
|
|
259
261
|
|
|
260
262
|
Vehicle 6
|
|
261
|
-
|
|
263
|
+
Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante
|
|
262
264
|
|
|
263
265
|
Vehicle 7
|
|
264
|
-
|
|
266
|
+
Duis et Fusce vitae elit. est sit ac
|
|
265
267
|
|
|
266
268
|
Vehicle 8
|
|
267
|
-
|
|
269
|
+
Ut sagittis elementum adipiscing iaculis. iaculis.
|
|
268
270
|
|
|
269
271
|
Vehicle 9
|
|
270
|
-
|
|
271
|
-
Lorem ac pretium pharetra Vivamus
|
|
272
|
+
Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante
|
|
272
273
|
|
|
273
274
|
Vehicle 10
|
|
274
|
-
|
|
275
|
+
Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus
|
|
275
276
|
|
|
276
277
|
#### React (tsx)
|
|
277
278
|
|
|
@@ -352,7 +353,7 @@ export default () => {
|
|
|
352
353
|
</div>
|
|
353
354
|
<div>
|
|
354
355
|
<div class="text-medium" data-test-ignore="text">Vehicle 1</div>
|
|
355
|
-
<div class="word-break" data-test-ignore="text">
|
|
356
|
+
<div class="word-break" data-test-ignore="text">Vel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac</div>
|
|
356
357
|
</div>
|
|
357
358
|
</div>
|
|
358
359
|
</div>
|
|
@@ -364,7 +365,7 @@ export default () => {
|
|
|
364
365
|
</div>
|
|
365
366
|
<div>
|
|
366
367
|
<div class="text-medium" data-test-ignore="text">Vehicle 2</div>
|
|
367
|
-
<div class="word-break" data-test-ignore="text">
|
|
368
|
+
<div class="word-break" data-test-ignore="text">Fringilla Fusce eget pharetra Vivamus</div>
|
|
368
369
|
</div>
|
|
369
370
|
</div>
|
|
370
371
|
</div>
|
|
@@ -376,7 +377,7 @@ export default () => {
|
|
|
376
377
|
</div>
|
|
377
378
|
<div>
|
|
378
379
|
<div class="text-medium" data-test-ignore="text">Vehicle 3</div>
|
|
379
|
-
<div class="word-break" data-test-ignore="text">In
|
|
380
|
+
<div class="word-break" data-test-ignore="text">In felis. dui metus malesuada fames</div>
|
|
380
381
|
</div>
|
|
381
382
|
</div>
|
|
382
383
|
</div>
|
|
@@ -388,7 +389,7 @@ export default () => {
|
|
|
388
389
|
</div>
|
|
389
390
|
<div>
|
|
390
391
|
<div class="text-medium" data-test-ignore="text">Vehicle 4</div>
|
|
391
|
-
<div class="word-break" data-test-ignore="text">
|
|
392
|
+
<div class="word-break" data-test-ignore="text">Aliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.</div>
|
|
392
393
|
</div>
|
|
393
394
|
</div>
|
|
394
395
|
</div>
|
|
@@ -400,7 +401,7 @@ export default () => {
|
|
|
400
401
|
</div>
|
|
401
402
|
<div>
|
|
402
403
|
<div class="text-medium" data-test-ignore="text">Vehicle 5</div>
|
|
403
|
-
<div class="word-break" data-test-ignore="text">
|
|
404
|
+
<div class="word-break" data-test-ignore="text">Ante Sed ligula dolor molestie</div>
|
|
404
405
|
</div>
|
|
405
406
|
</div>
|
|
406
407
|
</div>
|
|
@@ -412,7 +413,7 @@ export default () => {
|
|
|
412
413
|
</div>
|
|
413
414
|
<div>
|
|
414
415
|
<div class="text-medium" data-test-ignore="text">Vehicle 6</div>
|
|
415
|
-
<div class="word-break" data-test-ignore="text">
|
|
416
|
+
<div class="word-break" data-test-ignore="text">Volutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante</div>
|
|
416
417
|
</div>
|
|
417
418
|
</div>
|
|
418
419
|
</div>
|
|
@@ -424,11 +425,11 @@ export default () => {
|
|
|
424
425
|
</div>
|
|
425
426
|
<div>
|
|
426
427
|
<div class="text-medium" data-test-ignore="text">Vehicle 7</div>
|
|
427
|
-
<div class="word-break" data-test-ignore="text">
|
|
428
|
+
<div class="word-break" data-test-ignore="text">Duis et Fusce vitae elit. est sit ac</div>
|
|
428
429
|
</div>
|
|
429
430
|
</div>
|
|
430
431
|
</div>
|
|
431
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(
|
|
432
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(509px); width: 100%; will-change: transform;">
|
|
432
433
|
<div class="display-flex gap-15 align-items-center">
|
|
433
434
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
434
435
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -436,11 +437,11 @@ export default () => {
|
|
|
436
437
|
</div>
|
|
437
438
|
<div>
|
|
438
439
|
<div class="text-medium" data-test-ignore="text">Vehicle 8</div>
|
|
439
|
-
<div class="word-break" data-test-ignore="text">
|
|
440
|
+
<div class="word-break" data-test-ignore="text">Ut sagittis elementum adipiscing iaculis. iaculis.</div>
|
|
440
441
|
</div>
|
|
441
442
|
</div>
|
|
442
443
|
</div>
|
|
443
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(
|
|
444
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(579px); width: 100%; will-change: transform;">
|
|
444
445
|
<div class="display-flex gap-15 align-items-center">
|
|
445
446
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
446
447
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -448,8 +449,7 @@ export default () => {
|
|
|
448
449
|
</div>
|
|
449
450
|
<div>
|
|
450
451
|
<div class="text-medium" data-test-ignore="text">Vehicle 9</div>
|
|
451
|
-
<div class="word-break" data-test-ignore="text">
|
|
452
|
-
Lorem ac pretium pharetra Vivamus</div>
|
|
452
|
+
<div class="word-break" data-test-ignore="text">Libero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante</div>
|
|
453
453
|
</div>
|
|
454
454
|
</div>
|
|
455
455
|
</div>
|
|
@@ -461,7 +461,7 @@ export default () => {
|
|
|
461
461
|
</div>
|
|
462
462
|
<div>
|
|
463
463
|
<div class="text-medium" data-test-ignore="text">Vehicle 10</div>
|
|
464
|
-
<div class="word-break" data-test-ignore="text">
|
|
464
|
+
<div class="word-break" data-test-ignore="text">Duis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus</div>
|
|
465
465
|
</div>
|
|
466
466
|
</div>
|
|
467
467
|
</div>
|