@rio-cloud/uikit-mcp 1.1.6 → 1.1.7
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 +18 -18
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/animatedNumber.md +2 -2
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +30 -30
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +77 -60
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +4 -4
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +143 -337
- 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 +13 -13
- package/dist/docs/components/barList.md +10 -10
- package/dist/docs/components/basicMap.md +1 -1
- 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 +1 -9
- 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 +2 -2
- package/dist/docs/components/checkbox.md +1 -1
- package/dist/docs/components/circularProgress.md +6 -6
- 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 +1 -1
- package/dist/docs/components/dataTabs.md +9 -9
- package/dist/docs/components/datepickers.md +5 -5
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +4353 -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 +4 -4
- 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 +1 -1
- package/dist/docs/components/mapCluster.md +1 -1
- package/dist/docs/components/mapContext.md +1 -1
- package/dist/docs/components/mapDraggableMarker.md +1 -1
- package/dist/docs/components/mapGettingStarted.md +1 -1
- package/dist/docs/components/mapInfoBubble.md +1 -1
- package/dist/docs/components/mapLayerGroup.md +1 -1
- package/dist/docs/components/mapMarker.md +1 -1
- package/dist/docs/components/mapPolygon.md +1 -1
- package/dist/docs/components/mapRoute.md +1 -1
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +1 -1
- 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 +36 -36
- 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/radioCardGroup.md +1 -1
- 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 +9 -9
- 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/textTruncateMiddle.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/tracker.md +1 -1
- package/dist/docs/components/virtualList.md +79 -76
- package/dist/docs/foundations.md +120 -120
- package/dist/docs/start/changelog.md +789 -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 +1 -1
- 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 +1 -1
- 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 +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 +197 -197
- package/dist/docs/templates/loading-progress.md +1 -1
- 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/classNames.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/useCookies.md +1 -1
- 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 -1
- 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/useRioCookieConsent.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSearchHighlight.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 +87 -87
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useUrlState.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +1 -1
- package/dist/version.json +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/virtualList
|
|
6
|
-
*Captured:* 2026-02-
|
|
6
|
+
*Captured:* 2026-02-23T15:48:52.056Z
|
|
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,68 @@ 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
|
+
Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
|
|
18
18
|
|
|
19
19
|
Item 2
|
|
20
|
-
|
|
20
|
+
Ac aliquam Integer sit Fusce
|
|
21
21
|
|
|
22
22
|
Item 3
|
|
23
|
-
|
|
24
|
-
Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae
|
|
23
|
+
Metus faucibus. primis lorem finibus efficitur
|
|
25
24
|
|
|
26
25
|
Item 4
|
|
27
|
-
|
|
26
|
+
Semper purus efficitur Duis eget elementum viverra et posuere ac
|
|
28
27
|
|
|
29
28
|
Item 5
|
|
30
|
-
|
|
29
|
+
Fames elit. Interdum hendrerit felis.
|
|
31
30
|
|
|
32
31
|
Item 6
|
|
33
|
-
|
|
32
|
+
Tincidunt. neque. Ut in in tortor
|
|
33
|
+
Lorem volutpat condimentum elit. quis,
|
|
34
34
|
|
|
35
35
|
Item 7
|
|
36
|
-
|
|
36
|
+
Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
|
|
37
37
|
|
|
38
38
|
Item 8
|
|
39
|
-
|
|
39
|
+
In fringilla ut vel orci, hendrerit elit. tincidunt.
|
|
40
40
|
|
|
41
41
|
Item 9
|
|
42
|
-
|
|
42
|
+
Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
|
|
43
43
|
|
|
44
44
|
Item 10
|
|
45
|
-
|
|
45
|
+
Ipsum In in, fames sagittis velit.
|
|
46
46
|
|
|
47
47
|
#### Summary
|
|
48
48
|
|
|
49
49
|
Virtual list with 100 itemsItem 1
|
|
50
|
-
|
|
50
|
+
Ut semper. sem. in condimentum orci, ligula massa ac adipiscing
|
|
51
51
|
|
|
52
52
|
Item 2
|
|
53
|
-
|
|
53
|
+
Ac aliquam Integer sit Fusce
|
|
54
54
|
|
|
55
55
|
Item 3
|
|
56
|
-
|
|
57
|
-
Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae
|
|
56
|
+
Metus faucibus. primis lorem finibus efficitur
|
|
58
57
|
|
|
59
58
|
Item 4
|
|
60
|
-
|
|
59
|
+
Semper purus efficitur Duis eget elementum viverra et posuere ac
|
|
61
60
|
|
|
62
61
|
Item 5
|
|
63
|
-
|
|
62
|
+
Fames elit. Interdum hendrerit felis.
|
|
64
63
|
|
|
65
64
|
Item 6
|
|
66
|
-
|
|
65
|
+
Tincidunt. neque. Ut in in tortor
|
|
66
|
+
Lorem volutpat condimentum elit. quis,
|
|
67
67
|
|
|
68
68
|
Item 7
|
|
69
|
-
|
|
69
|
+
Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus
|
|
70
70
|
|
|
71
71
|
Item 8
|
|
72
|
-
|
|
72
|
+
In fringilla ut vel orci, hendrerit elit. tincidunt.
|
|
73
73
|
|
|
74
74
|
Item 9
|
|
75
|
-
|
|
75
|
+
Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac
|
|
76
76
|
|
|
77
77
|
Item 10
|
|
78
|
-
|
|
78
|
+
Ipsum In in, fames sagittis velit.
|
|
79
79
|
|
|
80
80
|
#### React (tsx)
|
|
81
81
|
|
|
@@ -123,67 +123,67 @@ export default () => {
|
|
|
123
123
|
<div class="max-width-600 padding-y-20">
|
|
124
124
|
<label class="padding-left-10">Virtual list with 100 items</label>
|
|
125
125
|
<div class="VirtualList overflow-y-auto max-height-400 padding-x-10" style="height: 100%; position: relative; overflow: auto;">
|
|
126
|
-
<div class="position-relative" style="height:
|
|
126
|
+
<div class="position-relative" style="height: 7000px;">
|
|
127
127
|
<div class="VirtualListItemContainer ">
|
|
128
128
|
<div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
|
|
129
129
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
130
130
|
<div class="text-medium" data-test-ignore="text">Item 1</div>
|
|
131
|
-
<div class="word-break" data-test-ignore="text">
|
|
131
|
+
<div class="word-break" data-test-ignore="text">Ut semper. sem. in condimentum orci, ligula massa ac adipiscing</div>
|
|
132
132
|
</div>
|
|
133
133
|
</div>
|
|
134
|
-
<div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(
|
|
134
|
+
<div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
|
|
135
135
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
136
136
|
<div class="text-medium" data-test-ignore="text">Item 2</div>
|
|
137
|
-
<div class="word-break" data-test-ignore="text">
|
|
137
|
+
<div class="word-break" data-test-ignore="text">Ac aliquam Integer sit Fusce</div>
|
|
138
138
|
</div>
|
|
139
139
|
</div>
|
|
140
|
-
<div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(
|
|
140
|
+
<div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
|
|
141
141
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
142
142
|
<div class="text-medium" data-test-ignore="text">Item 3</div>
|
|
143
|
-
<div class="word-break" data-test-ignore="text">
|
|
144
|
-
Lorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae</div>
|
|
143
|
+
<div class="word-break" data-test-ignore="text">Metus faucibus. primis lorem finibus efficitur</div>
|
|
145
144
|
</div>
|
|
146
145
|
</div>
|
|
147
|
-
<div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(
|
|
146
|
+
<div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
|
|
148
147
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
149
148
|
<div class="text-medium" data-test-ignore="text">Item 4</div>
|
|
150
|
-
<div class="word-break" data-test-ignore="text">
|
|
149
|
+
<div class="word-break" data-test-ignore="text">Semper purus efficitur Duis eget elementum viverra et posuere ac</div>
|
|
151
150
|
</div>
|
|
152
151
|
</div>
|
|
153
|
-
<div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(
|
|
152
|
+
<div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
|
|
154
153
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
155
154
|
<div class="text-medium" data-test-ignore="text">Item 5</div>
|
|
156
|
-
<div class="word-break" data-test-ignore="text">
|
|
155
|
+
<div class="word-break" data-test-ignore="text">Fames elit. Interdum hendrerit felis.</div>
|
|
157
156
|
</div>
|
|
158
157
|
</div>
|
|
159
|
-
<div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(
|
|
158
|
+
<div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
|
|
160
159
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
161
160
|
<div class="text-medium" data-test-ignore="text">Item 6</div>
|
|
162
|
-
<div class="word-break" data-test-ignore="text">
|
|
161
|
+
<div class="word-break" data-test-ignore="text">Tincidunt. neque. Ut in in tortor
|
|
162
|
+
Lorem volutpat condimentum elit. quis,</div>
|
|
163
163
|
</div>
|
|
164
164
|
</div>
|
|
165
|
-
<div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(
|
|
165
|
+
<div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
|
|
166
166
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
167
167
|
<div class="text-medium" data-test-ignore="text">Item 7</div>
|
|
168
|
-
<div class="word-break" data-test-ignore="text">
|
|
168
|
+
<div class="word-break" data-test-ignore="text">Eget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus</div>
|
|
169
169
|
</div>
|
|
170
170
|
</div>
|
|
171
|
-
<div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(
|
|
171
|
+
<div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
|
|
172
172
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
173
173
|
<div class="text-medium" data-test-ignore="text">Item 8</div>
|
|
174
|
-
<div class="word-break" data-test-ignore="text">
|
|
174
|
+
<div class="word-break" data-test-ignore="text">In fringilla ut vel orci, hendrerit elit. tincidunt.</div>
|
|
175
175
|
</div>
|
|
176
176
|
</div>
|
|
177
|
-
<div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(
|
|
177
|
+
<div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
|
|
178
178
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
179
179
|
<div class="text-medium" data-test-ignore="text">Item 9</div>
|
|
180
|
-
<div class="word-break" data-test-ignore="text">
|
|
180
|
+
<div class="word-break" data-test-ignore="text">Ante consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac</div>
|
|
181
181
|
</div>
|
|
182
182
|
</div>
|
|
183
|
-
<div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(
|
|
183
|
+
<div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(630px); width: 100%; will-change: transform;">
|
|
184
184
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
185
185
|
<div class="text-medium" data-test-ignore="text">Item 10</div>
|
|
186
|
-
<div class="word-break" data-test-ignore="text">
|
|
186
|
+
<div class="word-break" data-test-ignore="text">Ipsum In in, fames sagittis velit.</div>
|
|
187
187
|
</div>
|
|
188
188
|
</div>
|
|
189
189
|
</div>
|
|
@@ -209,67 +209,69 @@ export default () => {
|
|
|
209
209
|
|
|
210
210
|
Virtual list with 5000 items
|
|
211
211
|
Vehicle 1
|
|
212
|
-
|
|
212
|
+
Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
|
|
213
213
|
|
|
214
214
|
Vehicle 2
|
|
215
|
-
|
|
215
|
+
Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
|
|
216
216
|
|
|
217
217
|
Vehicle 3
|
|
218
|
-
|
|
218
|
+
Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
|
|
219
219
|
|
|
220
220
|
Vehicle 4
|
|
221
|
-
|
|
221
|
+
Dui In semper. quis, ac amet,
|
|
222
222
|
|
|
223
223
|
Vehicle 5
|
|
224
|
-
|
|
224
|
+
Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
|
|
225
225
|
|
|
226
226
|
Vehicle 6
|
|
227
|
-
|
|
227
|
+
Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
|
|
228
228
|
|
|
229
229
|
Vehicle 7
|
|
230
|
-
|
|
230
|
+
Vel In ac orci, tincidunt. efficitur finibus
|
|
231
231
|
|
|
232
232
|
Vehicle 8
|
|
233
|
-
|
|
233
|
+
Elit. in neque. in pretium vel sem. pretium finibus
|
|
234
234
|
|
|
235
235
|
Vehicle 9
|
|
236
|
-
Ante
|
|
236
|
+
Ante aliquam amet, velit. condimentum ac faucibus. aliquam
|
|
237
237
|
|
|
238
238
|
Vehicle 10
|
|
239
|
-
|
|
239
|
+
|
|
240
|
+
Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
|
|
240
241
|
|
|
241
242
|
#### Summary
|
|
242
243
|
|
|
243
244
|
Virtual list with 5000 items
|
|
244
245
|
Vehicle 1
|
|
245
|
-
|
|
246
|
+
Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames
|
|
246
247
|
|
|
247
248
|
Vehicle 2
|
|
248
|
-
|
|
249
|
+
Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam
|
|
249
250
|
|
|
250
251
|
Vehicle 3
|
|
251
|
-
|
|
252
|
+
Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris
|
|
252
253
|
|
|
253
254
|
Vehicle 4
|
|
254
|
-
|
|
255
|
+
Dui In semper. quis, ac amet,
|
|
255
256
|
|
|
256
257
|
Vehicle 5
|
|
257
|
-
|
|
258
|
+
Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum
|
|
258
259
|
|
|
259
260
|
Vehicle 6
|
|
260
|
-
|
|
261
|
+
Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor
|
|
261
262
|
|
|
262
263
|
Vehicle 7
|
|
263
|
-
|
|
264
|
+
Vel In ac orci, tincidunt. efficitur finibus
|
|
264
265
|
|
|
265
266
|
Vehicle 8
|
|
266
|
-
|
|
267
|
+
Elit. in neque. in pretium vel sem. pretium finibus
|
|
267
268
|
|
|
268
269
|
Vehicle 9
|
|
269
|
-
Ante
|
|
270
|
+
Ante aliquam amet, velit. condimentum ac faucibus. aliquam
|
|
270
271
|
|
|
271
272
|
Vehicle 10
|
|
272
|
-
|
|
273
|
+
|
|
274
|
+
Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor
|
|
273
275
|
|
|
274
276
|
#### React (tsx)
|
|
275
277
|
|
|
@@ -350,11 +352,11 @@ export default () => {
|
|
|
350
352
|
</div>
|
|
351
353
|
<div>
|
|
352
354
|
<div class="text-medium" data-test-ignore="text">Vehicle 1</div>
|
|
353
|
-
<div class="word-break" data-test-ignore="text">
|
|
355
|
+
<div class="word-break" data-test-ignore="text">Tortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames</div>
|
|
354
356
|
</div>
|
|
355
357
|
</div>
|
|
356
358
|
</div>
|
|
357
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(
|
|
359
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(89px); width: 100%; will-change: transform;">
|
|
358
360
|
<div class="display-flex gap-15 align-items-center">
|
|
359
361
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
360
362
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -362,11 +364,11 @@ export default () => {
|
|
|
362
364
|
</div>
|
|
363
365
|
<div>
|
|
364
366
|
<div class="text-medium" data-test-ignore="text">Vehicle 2</div>
|
|
365
|
-
<div class="word-break" data-test-ignore="text">
|
|
367
|
+
<div class="word-break" data-test-ignore="text">Dolor massa, rutrum Sed ut finibus eget ante nec vel aliquam</div>
|
|
366
368
|
</div>
|
|
367
369
|
</div>
|
|
368
370
|
</div>
|
|
369
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(
|
|
371
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(159px); width: 100%; will-change: transform;">
|
|
370
372
|
<div class="display-flex gap-15 align-items-center">
|
|
371
373
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
372
374
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -374,7 +376,7 @@ export default () => {
|
|
|
374
376
|
</div>
|
|
375
377
|
<div>
|
|
376
378
|
<div class="text-medium" data-test-ignore="text">Vehicle 3</div>
|
|
377
|
-
<div class="word-break" data-test-ignore="text">
|
|
379
|
+
<div class="word-break" data-test-ignore="text">Sed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris</div>
|
|
378
380
|
</div>
|
|
379
381
|
</div>
|
|
380
382
|
</div>
|
|
@@ -386,7 +388,7 @@ export default () => {
|
|
|
386
388
|
</div>
|
|
387
389
|
<div>
|
|
388
390
|
<div class="text-medium" data-test-ignore="text">Vehicle 4</div>
|
|
389
|
-
<div class="word-break" data-test-ignore="text">
|
|
391
|
+
<div class="word-break" data-test-ignore="text">Dui In semper. quis, ac amet,</div>
|
|
390
392
|
</div>
|
|
391
393
|
</div>
|
|
392
394
|
</div>
|
|
@@ -398,7 +400,7 @@ export default () => {
|
|
|
398
400
|
</div>
|
|
399
401
|
<div>
|
|
400
402
|
<div class="text-medium" data-test-ignore="text">Vehicle 5</div>
|
|
401
|
-
<div class="word-break" data-test-ignore="text">
|
|
403
|
+
<div class="word-break" data-test-ignore="text">Ut semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum</div>
|
|
402
404
|
</div>
|
|
403
405
|
</div>
|
|
404
406
|
</div>
|
|
@@ -410,7 +412,7 @@ export default () => {
|
|
|
410
412
|
</div>
|
|
411
413
|
<div>
|
|
412
414
|
<div class="text-medium" data-test-ignore="text">Vehicle 6</div>
|
|
413
|
-
<div class="word-break" data-test-ignore="text">
|
|
415
|
+
<div class="word-break" data-test-ignore="text">Vel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor</div>
|
|
414
416
|
</div>
|
|
415
417
|
</div>
|
|
416
418
|
</div>
|
|
@@ -422,7 +424,7 @@ export default () => {
|
|
|
422
424
|
</div>
|
|
423
425
|
<div>
|
|
424
426
|
<div class="text-medium" data-test-ignore="text">Vehicle 7</div>
|
|
425
|
-
<div class="word-break" data-test-ignore="text">
|
|
427
|
+
<div class="word-break" data-test-ignore="text">Vel In ac orci, tincidunt. efficitur finibus</div>
|
|
426
428
|
</div>
|
|
427
429
|
</div>
|
|
428
430
|
</div>
|
|
@@ -434,7 +436,7 @@ export default () => {
|
|
|
434
436
|
</div>
|
|
435
437
|
<div>
|
|
436
438
|
<div class="text-medium" data-test-ignore="text">Vehicle 8</div>
|
|
437
|
-
<div class="word-break" data-test-ignore="text">
|
|
439
|
+
<div class="word-break" data-test-ignore="text">Elit. in neque. in pretium vel sem. pretium finibus</div>
|
|
438
440
|
</div>
|
|
439
441
|
</div>
|
|
440
442
|
</div>
|
|
@@ -446,7 +448,7 @@ export default () => {
|
|
|
446
448
|
</div>
|
|
447
449
|
<div>
|
|
448
450
|
<div class="text-medium" data-test-ignore="text">Vehicle 9</div>
|
|
449
|
-
<div class="word-break" data-test-ignore="text">Ante
|
|
451
|
+
<div class="word-break" data-test-ignore="text">Ante aliquam amet, velit. condimentum ac faucibus. aliquam</div>
|
|
450
452
|
</div>
|
|
451
453
|
</div>
|
|
452
454
|
</div>
|
|
@@ -458,7 +460,8 @@ export default () => {
|
|
|
458
460
|
</div>
|
|
459
461
|
<div>
|
|
460
462
|
<div class="text-medium" data-test-ignore="text">Vehicle 10</div>
|
|
461
|
-
<div class="word-break" data-test-ignore="text">
|
|
463
|
+
<div class="word-break" data-test-ignore="text">
|
|
464
|
+
Lorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor</div>
|
|
462
465
|
</div>
|
|
463
466
|
</div>
|
|
464
467
|
</div>
|