@rio-cloud/uikit-mcp 1.1.7 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -18
- package/dist/doc-metadata.json +125 -295
- package/dist/docs/components/accentBar.md +16 -69
- package/dist/docs/components/activity.md +7 -44
- package/dist/docs/components/animatedNumber.md +3 -11
- package/dist/docs/components/animatedTextReveal.md +6 -34
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +40 -193
- package/dist/docs/components/appNavigationBar.md +1 -24
- package/dist/docs/components/areaCharts.md +7 -22
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
- package/dist/docs/components/assetTree.md +241 -280
- package/dist/docs/components/autosuggests.md +3 -102
- package/dist/docs/components/avatar.md +1 -16
- package/dist/docs/components/banner.md +4 -37
- package/dist/docs/components/barCharts.md +20 -75
- package/dist/docs/components/barList.md +10 -78
- package/dist/docs/components/basicMap.md +1 -67
- package/dist/docs/components/bottomSheet.md +2 -28
- package/dist/docs/components/button.md +12 -65
- package/dist/docs/components/buttonToolbar.md +5 -19
- package/dist/docs/components/calendarStripe.md +50 -100
- package/dist/docs/components/card.md +1 -9
- package/dist/docs/components/carousel.md +1 -14
- package/dist/docs/components/chartColors.md +1 -156
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -81
- package/dist/docs/components/checkbox.md +11 -72
- package/dist/docs/components/circularProgress.md +8 -49
- package/dist/docs/components/clearableInput.md +3 -62
- package/dist/docs/components/collapse.md +2 -15
- package/dist/docs/components/composedCharts.md +16 -26
- package/dist/docs/components/contentLoader.md +7 -25
- package/dist/docs/components/dataTabs.md +16 -104
- package/dist/docs/components/datepickers.md +710 -962
- package/dist/docs/components/dialogs.md +5 -67
- package/dist/docs/components/divider.md +1 -33
- package/dist/docs/components/dropdowns.md +3424 -5567
- package/dist/docs/components/editableContent.md +4 -82
- package/dist/docs/components/expander.md +15 -88
- package/dist/docs/components/fade.md +4 -61
- package/dist/docs/components/fadeExpander.md +1 -7
- package/dist/docs/components/fadeUp.md +2 -76
- package/dist/docs/components/feedback.md +9 -68
- package/dist/docs/components/filePickers.md +4 -18
- package/dist/docs/components/formLabel.md +7 -27
- package/dist/docs/components/groupedItemList.md +2 -158
- package/dist/docs/components/iconList.md +7 -64
- package/dist/docs/components/imagePreloader.md +1 -9
- package/dist/docs/components/labeledElement.md +3 -18
- package/dist/docs/components/licensePlate.md +1 -43
- package/dist/docs/components/lineCharts.md +8 -39
- package/dist/docs/components/listMenu.md +2 -34
- package/dist/docs/components/loadMore.md +5 -24
- package/dist/docs/components/mainNavigation.md +1 -9
- package/dist/docs/components/mapCircle.md +1 -23
- package/dist/docs/components/mapCluster.md +2 -54
- package/dist/docs/components/mapContext.md +1 -23
- package/dist/docs/components/mapDraggableMarker.md +2 -28
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +1 -27
- package/dist/docs/components/mapLayerGroup.md +1 -23
- package/dist/docs/components/mapMarker.md +1 -99
- package/dist/docs/components/mapPolygon.md +2 -116
- package/dist/docs/components/mapRoute.md +6 -1465
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -128
- package/dist/docs/components/mapUtils.md +10 -113
- package/dist/docs/components/multiselects.md +14 -163
- package/dist/docs/components/noData.md +8 -22
- package/dist/docs/components/notifications.md +3 -19
- package/dist/docs/components/numbercontrol.md +3 -47
- package/dist/docs/components/onboarding.md +3 -15
- package/dist/docs/components/page.md +1 -33
- package/dist/docs/components/pager.md +1 -17
- package/dist/docs/components/pieCharts.md +40 -71
- package/dist/docs/components/popover.md +1 -12
- package/dist/docs/components/position.md +2 -6
- package/dist/docs/components/radialBarCharts.md +32 -116
- package/dist/docs/components/radioCardGroup.md +6 -48
- package/dist/docs/components/radiobutton.md +6 -75
- package/dist/docs/components/releaseNotes.md +3 -21
- package/dist/docs/components/resizer.md +1 -7
- package/dist/docs/components/responsiveColumnStripe.md +9 -49
- package/dist/docs/components/responsiveVideo.md +1 -7
- package/dist/docs/components/rioglyph.md +1 -17
- package/dist/docs/components/rules.md +7 -70
- package/dist/docs/components/saveableInput.md +267 -401
- package/dist/docs/components/selects.md +27 -1164
- package/dist/docs/components/sidebar.md +6 -17
- package/dist/docs/components/sliders.md +1 -27
- package/dist/docs/components/smoothScrollbars.md +1 -73
- package/dist/docs/components/spinners.md +6 -51
- package/dist/docs/components/states.md +6 -92
- package/dist/docs/components/statsWidgets.md +1 -76
- package/dist/docs/components/statusBar.md +1 -57
- package/dist/docs/components/stepButton.md +2 -7
- package/dist/docs/components/steppedProgressBars.md +5 -62
- package/dist/docs/components/subNavigation.md +1 -31
- package/dist/docs/components/supportMarker.md +2 -14
- package/dist/docs/components/svgImage.md +1 -5
- package/dist/docs/components/switch.md +2 -33
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -41
- package/dist/docs/components/tags.md +1 -138
- package/dist/docs/components/teaser.md +2 -122
- package/dist/docs/components/textTruncateMiddle.md +2 -9
- package/dist/docs/components/timeline.md +1 -99
- package/dist/docs/components/timepicker.md +4 -79
- package/dist/docs/components/toggleButton.md +2 -15
- package/dist/docs/components/tooltip.md +9 -30
- package/dist/docs/components/tracker.md +2 -19
- package/dist/docs/components/virtualList.md +61 -130
- package/dist/docs/foundations.md +749 -4069
- package/dist/docs/start/changelog.md +5 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +149 -483
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +4 -16
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +13 -67
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +11 -11
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/utilities/classNames.md +3 -18
- package/dist/docs/utilities/deviceUtils.md +7 -13
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +2 -12
- package/dist/docs/utilities/routeUtils.md +25 -343
- package/dist/docs/utilities/useAfterMount.md +1 -6
- package/dist/docs/utilities/useAutoAnimate.md +2 -15
- package/dist/docs/utilities/useAverage.md +1 -6
- package/dist/docs/utilities/useClickOutside.md +1 -5
- package/dist/docs/utilities/useClipboard.md +2 -6
- package/dist/docs/utilities/useCookies.md +2 -10
- package/dist/docs/utilities/useCount.md +7 -16
- package/dist/docs/utilities/useDarkMode.md +2 -6
- package/dist/docs/utilities/useDebugInfo.md +6 -20
- package/dist/docs/utilities/useEffectOnce.md +1 -6
- package/dist/docs/utilities/useElapsedTime.md +2 -6
- package/dist/docs/utilities/useElementSize.md +1 -7
- package/dist/docs/utilities/useEsc.md +1 -5
- package/dist/docs/utilities/useEvent.md +1 -5
- package/dist/docs/utilities/useFocusTrap.md +1 -5
- package/dist/docs/utilities/useFullscreen.md +2 -15
- package/dist/docs/utilities/useHover.md +1 -5
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
- package/dist/docs/utilities/useInterval.md +2 -8
- package/dist/docs/utilities/useIsFocusWithin.md +1 -10
- package/dist/docs/utilities/useKey.md +1 -15
- package/dist/docs/utilities/useLocalStorage.md +2 -11
- package/dist/docs/utilities/useLocationSuggestions.md +1 -5
- package/dist/docs/utilities/useMax.md +1 -5
- package/dist/docs/utilities/useMin.md +1 -5
- package/dist/docs/utilities/useMutationObserver.md +3 -11
- package/dist/docs/utilities/useOnScreen.md +1 -8
- package/dist/docs/utilities/useOnlineStatus.md +1 -5
- package/dist/docs/utilities/usePostMessage.md +3 -9
- package/dist/docs/utilities/usePostMessageSender.md +3 -13
- package/dist/docs/utilities/usePrevious.md +1 -5
- package/dist/docs/utilities/useResizeObserver.md +3 -11
- package/dist/docs/utilities/useRioCookieConsent.md +1 -5
- package/dist/docs/utilities/useScrollPosition.md +3 -59
- package/dist/docs/utilities/useSearch.md +2 -16
- package/dist/docs/utilities/useSearchHighlight.md +13 -78
- package/dist/docs/utilities/useSorting.md +18 -43
- package/dist/docs/utilities/useStateWithValidation.md +1 -5
- package/dist/docs/utilities/useSum.md +1 -9
- package/dist/docs/utilities/useTableExport.md +42 -59
- package/dist/docs/utilities/useTableSelection.md +74 -119
- package/dist/docs/utilities/useTimeout.md +2 -6
- package/dist/docs/utilities/useToggle.md +4 -14
- package/dist/docs/utilities/useUrlState.md +2 -27
- package/dist/docs/utilities/useWindowResize.md +1 -5
- package/dist/index.mjs +46 -16
- package/dist/version.json +2 -2
- package/package.json +15 -9
- package/dist/docs/templates/common-table.md +0 -1112
- package/dist/docs/templates/detail-views.md +0 -942
- package/dist/docs/templates/expandable-details.md +0 -228
- package/dist/docs/templates/feature-cards.md +0 -549
- package/dist/docs/templates/form-summary.md +0 -199
- package/dist/docs/templates/form-toggle.md +0 -367
- package/dist/docs/templates/list-blocks.md +0 -1021
- package/dist/docs/templates/loading-progress.md +0 -109
- package/dist/docs/templates/options-panel.md +0 -152
- package/dist/docs/templates/panel-variants.md +0 -164
- package/dist/docs/templates/progress-cards.md +0 -607
- package/dist/docs/templates/progress-success.md +0 -142
- package/dist/docs/templates/settings-form.md +0 -434
- package/dist/docs/templates/stats-blocks.md +0 -1381
- package/dist/docs/templates/table-panel.md +0 -184
- package/dist/docs/templates/table-row-animation.md +0 -317
- package/dist/docs/templates/usage-cards.md +0 -227
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/editableContent
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:11.074Z
|
|
7
7
|
|
|
8
8
|
The EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the "pencil" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.
|
|
9
9
|
|
|
@@ -13,13 +13,7 @@ Please also check out the usage guidelines below.
|
|
|
13
13
|
|
|
14
14
|
### Example: Example 1
|
|
15
15
|
|
|
16
|
-
Simple editable content
|
|
17
|
-
Click Me!
|
|
18
|
-
|
|
19
|
-
#### Summary
|
|
20
|
-
|
|
21
|
-
Simple editable content
|
|
22
|
-
Click Me!
|
|
16
|
+
Simple editable content Click Me!
|
|
23
17
|
|
|
24
18
|
#### React (tsx)
|
|
25
19
|
|
|
@@ -90,13 +84,6 @@ Headline that can change
|
|
|
90
84
|
|
|
91
85
|
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.
|
|
92
86
|
|
|
93
|
-
#### Summary
|
|
94
|
-
|
|
95
|
-
Editable headline - like dialog or panel header
|
|
96
|
-
Headline that can change
|
|
97
|
-
|
|
98
|
-
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.
|
|
99
|
-
|
|
100
87
|
#### React (tsx)
|
|
101
88
|
|
|
102
89
|
```tsx
|
|
@@ -186,11 +173,6 @@ export default () => {
|
|
|
186
173
|
Editable content using a resizable textarea
|
|
187
174
|
This text can be edited on multiple lines
|
|
188
175
|
|
|
189
|
-
#### Summary
|
|
190
|
-
|
|
191
|
-
Editable content using a resizable textarea
|
|
192
|
-
This text can be edited on multiple lines
|
|
193
|
-
|
|
194
176
|
#### React (tsx)
|
|
195
177
|
|
|
196
178
|
```tsx
|
|
@@ -269,11 +251,7 @@ export default () => {
|
|
|
269
251
|
|
|
270
252
|
### Example: Example 4
|
|
271
253
|
|
|
272
|
-
Focusable editable content with input
|
|
273
|
-
|
|
274
|
-
#### Summary
|
|
275
|
-
|
|
276
|
-
Focusable editable content with input validationThis content must not contain numbers.
|
|
254
|
+
Focusable editable content with input validation This content must not contain numbers.
|
|
277
255
|
|
|
278
256
|
#### React (tsx)
|
|
279
257
|
|
|
@@ -369,11 +347,7 @@ export default () => {
|
|
|
369
347
|
|
|
370
348
|
### Example: Example 5
|
|
371
349
|
|
|
372
|
-
Editable text inside of another
|
|
373
|
-
|
|
374
|
-
#### Summary
|
|
375
|
-
|
|
376
|
-
Editable text inside of another textLorem 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. This text can be edited 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.`;
|
|
350
|
+
Editable text inside of another text 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. This text can be edited 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.`;
|
|
377
351
|
|
|
378
352
|
#### React (tsx)
|
|
379
353
|
|
|
@@ -446,11 +420,6 @@ export default () => {
|
|
|
446
420
|
Render NumberControl as custom editor component
|
|
447
421
|
234
|
|
448
422
|
|
|
449
|
-
#### Summary
|
|
450
|
-
|
|
451
|
-
Render NumberControl as custom editor component
|
|
452
|
-
234
|
|
453
|
-
|
|
454
423
|
#### React (tsx)
|
|
455
424
|
|
|
456
425
|
```tsx
|
|
@@ -590,11 +559,6 @@ export default () => {
|
|
|
590
559
|
Render NumberInput as custom editor component with input validation
|
|
591
560
|
234
|
|
592
561
|
|
|
593
|
-
#### Summary
|
|
594
|
-
|
|
595
|
-
Render NumberInput as custom editor component with input validation
|
|
596
|
-
234
|
|
597
|
-
|
|
598
562
|
#### React (tsx)
|
|
599
563
|
|
|
600
564
|
```tsx
|
|
@@ -774,48 +738,6 @@ Lorem ipsum dolor
|
|
|
774
738
|
Note
|
|
775
739
|
In general, don't make every cell in a table editable. The indication style would be too repetitive and the user does not expect this behavior as it is not implemented in other services like so. Strive for a common look and feel with regards to other services.
|
|
776
740
|
|
|
777
|
-
#### Summary
|
|
778
|
-
|
|
779
|
-
Don't
|
|
780
|
-
Avoid overuse in lists or tables. Avoid many repetitions of edit icons.
|
|
781
|
-
Lorem ipsum dolor
|
|
782
|
-
|
|
783
|
-
Lorem ipsum dolor
|
|
784
|
-
|
|
785
|
-
Lorem ipsum dolor
|
|
786
|
-
|
|
787
|
-
Lorem ipsum dolor
|
|
788
|
-
|
|
789
|
-
Lorem ipsum dolor
|
|
790
|
-
|
|
791
|
-
Lorem ipsum dolor
|
|
792
|
-
|
|
793
|
-
Lorem ipsum dolor
|
|
794
|
-
|
|
795
|
-
Do
|
|
796
|
-
Use an underline to indicate editable text and use a hover icon on Desktop if possible.
|
|
797
|
-
Lorem ipsum dolor
|
|
798
|
-
|
|
799
|
-
Lorem ipsum dolor
|
|
800
|
-
|
|
801
|
-
Lorem ipsum dolor
|
|
802
|
-
|
|
803
|
-
Lorem ipsum dolor
|
|
804
|
-
|
|
805
|
-
Lorem ipsum dolor
|
|
806
|
-
|
|
807
|
-
Lorem ipsum dolor
|
|
808
|
-
|
|
809
|
-
Lorem ipsum dolor
|
|
810
|
-
|
|
811
|
-
Do
|
|
812
|
-
Using the editable field in isolation like inside a panel header or a like, you can permanently show a edit icon.
|
|
813
|
-
Lorem ipsum dolor
|
|
814
|
-
Lorem ipsum dolor
|
|
815
|
-
|
|
816
|
-
Note
|
|
817
|
-
In general, don't make every cell in a table editable. The indication style would be too repetitive and the user does not expect this behavior as it is not implemented in other services like so. Strive for a common look and feel with regards to other services.
|
|
818
|
-
|
|
819
741
|
#### React (tsx)
|
|
820
742
|
|
|
821
743
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Show/Hide
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/expander
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:18.829Z
|
|
7
7
|
|
|
8
8
|
A simple panel component where the "panel-body" can be expanded.
|
|
9
9
|
|
|
@@ -11,13 +11,7 @@ A simple panel component where the "panel-body" can be expanded.
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
Toggle
|
|
15
|
-
Click me to toggle my state
|
|
16
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
17
|
-
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
Toggle expanderOpen expanderClose expander
|
|
14
|
+
Toggle expander Open expander Close expander
|
|
21
15
|
Click me to toggle my state
|
|
22
16
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
23
17
|
|
|
@@ -135,78 +129,37 @@ export default () => {
|
|
|
135
129
|
|
|
136
130
|
### Example: Default
|
|
137
131
|
|
|
138
|
-
|
|
139
|
-
Some content
|
|
140
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
141
|
-
|
|
142
|
-
BlankLorem ipsum
|
|
143
|
-
Some content
|
|
144
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
145
|
-
|
|
146
|
-
SeparatorSeparator with icon left
|
|
147
|
-
|
|
148
|
-
Lorem ipsum dolor sit amet
|
|
149
|
-
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
150
|
-
|
|
151
|
-
SeparatorSeparator right aligned
|
|
152
|
-
|
|
153
|
-
Lorem ipsum dolor sit amet
|
|
154
|
-
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
155
|
-
|
|
156
|
-
PrimaryLorem ipsum
|
|
157
|
-
|
|
158
|
-
PrimaryHeader with icon left
|
|
159
|
-
|
|
160
|
-
SecondaryLorem ipsum
|
|
161
|
-
|
|
162
|
-
InfoLorem ipsum
|
|
163
|
-
|
|
164
|
-
WarningLorem ipsum
|
|
165
|
-
|
|
166
|
-
DangerLorem ipsum
|
|
167
|
-
|
|
168
|
-
successLorem ipsum
|
|
169
|
-
|
|
170
|
-
Dynamic table content
|
|
171
|
-
Item 1
|
|
172
|
-
Item 2
|
|
173
|
-
Item 3
|
|
174
|
-
|
|
175
|
-
Add new table row
|
|
176
|
-
|
|
177
|
-
#### Summary
|
|
178
|
-
|
|
179
|
-
DefaultLorem ipsum
|
|
132
|
+
Default Lorem ipsum
|
|
180
133
|
Some content
|
|
181
134
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
182
135
|
|
|
183
|
-
|
|
136
|
+
Blank Lorem ipsum
|
|
184
137
|
Some content
|
|
185
138
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
186
139
|
|
|
187
|
-
|
|
140
|
+
Separator Separator with icon left
|
|
188
141
|
|
|
189
142
|
Lorem ipsum dolor sit amet
|
|
190
143
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
191
144
|
|
|
192
|
-
|
|
145
|
+
Separator Separator right aligned
|
|
193
146
|
|
|
194
147
|
Lorem ipsum dolor sit amet
|
|
195
148
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
196
149
|
|
|
197
|
-
|
|
150
|
+
Primary Lorem ipsum
|
|
198
151
|
|
|
199
|
-
|
|
152
|
+
Primary Header with icon left
|
|
200
153
|
|
|
201
|
-
|
|
154
|
+
Secondary Lorem ipsum
|
|
202
155
|
|
|
203
|
-
|
|
156
|
+
Info Lorem ipsum
|
|
204
157
|
|
|
205
|
-
|
|
158
|
+
Warning Lorem ipsum
|
|
206
159
|
|
|
207
|
-
|
|
160
|
+
Danger Lorem ipsum
|
|
208
161
|
|
|
209
|
-
|
|
162
|
+
success Lorem ipsum
|
|
210
163
|
|
|
211
164
|
Dynamic table content
|
|
212
165
|
Item 1
|
|
@@ -691,37 +644,11 @@ Grid column 1
|
|
|
691
644
|
Grid column 2
|
|
692
645
|
Grid column 3
|
|
693
646
|
|
|
694
|
-
Click
|
|
695
|
-
|
|
696
|
-
Click me
|
|
697
|
-
|
|
698
|
-
Not expandable since there is no body
|
|
699
|
-
|
|
700
|
-
Toggle first
|
|
701
|
-
|
|
702
|
-
#### Summary
|
|
647
|
+
Click me 42
|
|
703
648
|
|
|
704
649
|
Click me
|
|
705
|
-
Some content
|
|
706
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
|
|
707
|
-
|
|
708
|
-
Click me
|
|
709
|
-
|
|
710
|
-
Click me
|
|
711
|
-
|
|
712
|
-
With custom classes for header and body
|
|
713
|
-
|
|
714
|
-
Grid column 1
|
|
715
|
-
Grid column 2
|
|
716
|
-
Grid column 3
|
|
717
|
-
|
|
718
|
-
Click me42
|
|
719
|
-
|
|
720
|
-
Click me
|
|
721
|
-
|
|
722
|
-
Not expandable since there is no body
|
|
723
650
|
|
|
724
|
-
Toggle first
|
|
651
|
+
Not expandable since there is no body Toggle first
|
|
725
652
|
|
|
726
653
|
#### React (tsx)
|
|
727
654
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Show/Hide
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/fade
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:20.356Z
|
|
7
7
|
|
|
8
8
|
The Fade component fades in and out content with a given animation style.
|
|
9
9
|
|
|
@@ -11,17 +11,7 @@ The Fade component fades in and out content with a given animation style.
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
-
Animation styles:fade (default)
|
|
15
|
-
|
|
16
|
-
Toggle content
|
|
17
|
-
|
|
18
|
-
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.
|
|
19
|
-
|
|
20
|
-
#### Summary
|
|
21
|
-
|
|
22
|
-
Animation styles:fade (default)fromLeftfromRightfromTopfromBottom
|
|
23
|
-
|
|
24
|
-
Toggle content
|
|
14
|
+
Animation styles: fade (default) fromLeft fromRight fromTop fromBottom Toggle content
|
|
25
15
|
|
|
26
16
|
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.
|
|
27
17
|
|
|
@@ -160,16 +150,7 @@ export default () => {
|
|
|
160
150
|
### Example: Example 2
|
|
161
151
|
|
|
162
152
|
Fading tab content:
|
|
163
|
-
When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
|
|
164
|
-
Tab 1
|
|
165
|
-
Tab 2
|
|
166
|
-
|
|
167
|
-
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.
|
|
168
|
-
|
|
169
|
-
#### Summary
|
|
170
|
-
|
|
171
|
-
Fading tab content:
|
|
172
|
-
When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
|
|
153
|
+
When using tabs or pills to switch between content, please us the fade style 'tabs' . It's the default so you don't have to explicitly set it.
|
|
173
154
|
Tab 1
|
|
174
155
|
Tab 2
|
|
175
156
|
|
|
@@ -275,16 +256,7 @@ const ContentTab2 = () => (
|
|
|
275
256
|
### Example: Example 3
|
|
276
257
|
|
|
277
258
|
Fading pills content:
|
|
278
|
-
When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
|
|
279
|
-
Tab 1
|
|
280
|
-
Tab 2
|
|
281
|
-
|
|
282
|
-
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.
|
|
283
|
-
|
|
284
|
-
#### Summary
|
|
285
|
-
|
|
286
|
-
Fading pills content:
|
|
287
|
-
When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
|
|
259
|
+
When using tabs or pills to switch between content, please us the fade style 'tabs' . It's the default so you don't have to explicitly set it.
|
|
288
260
|
Tab 1
|
|
289
261
|
Tab 2
|
|
290
262
|
|
|
@@ -412,17 +384,6 @@ Previous
|
|
|
412
384
|
|
|
413
385
|
Next
|
|
414
386
|
|
|
415
|
-
#### Summary
|
|
416
|
-
|
|
417
|
-
Page transition fade:
|
|
418
|
-
You may want to use 'page' or 'pageBack' style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.
|
|
419
|
-
|
|
420
|
-
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.
|
|
421
|
-
|
|
422
|
-
Previous
|
|
423
|
-
|
|
424
|
-
Next
|
|
425
|
-
|
|
426
387
|
#### React (tsx)
|
|
427
388
|
|
|
428
389
|
```tsx
|
|
@@ -597,24 +558,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
|
597
558
|
Consetetur sadipscing
|
|
598
559
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
599
560
|
|
|
600
|
-
#### Summary
|
|
601
|
-
|
|
602
|
-
This demonstrates how transitions can be used to create a more engaging user experience.
|
|
603
|
-
Selecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.
|
|
604
|
-
This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.
|
|
605
|
-
|
|
606
|
-
Lorem ipsum
|
|
607
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
608
|
-
|
|
609
|
-
Dolor
|
|
610
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
611
|
-
|
|
612
|
-
Sit amet
|
|
613
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
614
|
-
|
|
615
|
-
Consetetur sadipscing
|
|
616
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
617
|
-
|
|
618
561
|
#### React (tsx)
|
|
619
562
|
|
|
620
563
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Show/Hide
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/fadeExpander
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:19.524Z
|
|
7
7
|
|
|
8
8
|
The FadeExpander component fades in and expands when the content.
|
|
9
9
|
|
|
@@ -15,12 +15,6 @@ Lorem ipsum dolor sit amet
|
|
|
15
15
|
|
|
16
16
|
Enable lorem ipsum dolor sit amet
|
|
17
17
|
|
|
18
|
-
#### Summary
|
|
19
|
-
|
|
20
|
-
Lorem ipsum dolor sit amet
|
|
21
|
-
|
|
22
|
-
Enable lorem ipsum dolor sit amet
|
|
23
|
-
|
|
24
18
|
#### React (tsx)
|
|
25
19
|
|
|
26
20
|
```tsx
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Show/Hide
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/fadeUp
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:20.757Z
|
|
7
7
|
|
|
8
8
|
The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.
|
|
9
9
|
|
|
@@ -71,68 +71,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
|
|
|
71
71
|
|
|
72
72
|
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.
|
|
73
73
|
|
|
74
|
-
#### Summary
|
|
75
|
-
|
|
76
|
-
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.
|
|
77
|
-
|
|
78
|
-
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.
|
|
79
|
-
|
|
80
|
-
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.
|
|
81
|
-
|
|
82
|
-
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.
|
|
83
|
-
|
|
84
|
-
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.
|
|
85
|
-
|
|
86
|
-
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.
|
|
87
|
-
|
|
88
|
-
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.
|
|
89
|
-
|
|
90
|
-
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.
|
|
91
|
-
|
|
92
|
-
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.
|
|
93
|
-
|
|
94
|
-
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.
|
|
95
|
-
|
|
96
|
-
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.
|
|
97
|
-
|
|
98
|
-
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.
|
|
99
|
-
|
|
100
|
-
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.
|
|
101
|
-
|
|
102
|
-
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.
|
|
103
|
-
|
|
104
|
-
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.
|
|
105
|
-
|
|
106
|
-
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.
|
|
107
|
-
|
|
108
|
-
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.
|
|
109
|
-
|
|
110
|
-
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.
|
|
111
|
-
|
|
112
|
-
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.
|
|
113
|
-
|
|
114
|
-
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.
|
|
115
|
-
|
|
116
|
-
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.
|
|
117
|
-
|
|
118
|
-
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.
|
|
119
|
-
|
|
120
|
-
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.
|
|
121
|
-
|
|
122
|
-
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.
|
|
123
|
-
|
|
124
|
-
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.
|
|
125
|
-
|
|
126
|
-
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.
|
|
127
|
-
|
|
128
|
-
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.
|
|
129
|
-
|
|
130
|
-
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.
|
|
131
|
-
|
|
132
|
-
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.
|
|
133
|
-
|
|
134
|
-
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.
|
|
135
|
-
|
|
136
74
|
#### React (tsx)
|
|
137
75
|
|
|
138
76
|
```tsx
|
|
@@ -300,18 +238,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
|
|
|
300
238
|
|
|
301
239
|
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.
|
|
302
240
|
|
|
303
|
-
#### Summary
|
|
304
|
-
|
|
305
|
-
Lorem ipsum dolor sit amet
|
|
306
|
-
|
|
307
|
-
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.
|
|
308
|
-
|
|
309
|
-
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.
|
|
310
|
-
|
|
311
|
-
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.
|
|
312
|
-
|
|
313
|
-
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.
|
|
314
|
-
|
|
315
241
|
#### React (tsx)
|
|
316
242
|
|
|
317
243
|
```tsx
|
|
@@ -356,7 +282,7 @@ export default () => {
|
|
|
356
282
|
<div class="" style="opacity: 1; transform: none;">
|
|
357
283
|
<h1 class="">Lorem ipsum dolor sit amet</h1>
|
|
358
284
|
</div>
|
|
359
|
-
<div class="" style="opacity: 0; transform: translateY(0.
|
|
285
|
+
<div class="" style="opacity: 0; transform: translateY(0.0299483px);">
|
|
360
286
|
<p class="text-color-dark">
|
|
361
287
|
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.</p>
|
|
362
288
|
</div>
|
|
@@ -3,51 +3,30 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/feedback
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-03-06T10:40:59.233Z
|
|
7
7
|
|
|
8
8
|
## FeedbackRating
|
|
9
9
|
|
|
10
10
|
### Example: Extremely dissatisfied
|
|
11
11
|
|
|
12
12
|
How do you feel about this feature
|
|
13
|
-
|
|
14
|
-
Extremely
|
|
13
|
+
1 2 3 4 5 6 7 8 9 10
|
|
14
|
+
Extremely dissatisfied Extremely satisfied
|
|
15
15
|
|
|
16
16
|
Rate your experience with this feature
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
1 2 3 4 5
|
|
19
19
|
|
|
20
20
|
Give us feedback
|
|
21
21
|
|
|
22
22
|
Rate your experience with our product
|
|
23
|
-
|
|
23
|
+
1 2 3 4 5
|
|
24
24
|
|
|
25
25
|
Stars
|
|
26
26
|
|
|
27
27
|
How likely is it that you would recommend us to a friend or colleague?
|
|
28
|
-
|
|
29
|
-
Not likely at
|
|
30
|
-
|
|
31
|
-
#### Summary
|
|
32
|
-
|
|
33
|
-
How do you feel about this feature
|
|
34
|
-
12345678910
|
|
35
|
-
Extremely dissatisfiedExtremely satisfied
|
|
36
|
-
|
|
37
|
-
Rate your experience with this feature
|
|
38
|
-
|
|
39
|
-
12345
|
|
40
|
-
|
|
41
|
-
Give us feedback
|
|
42
|
-
|
|
43
|
-
Rate your experience with our product
|
|
44
|
-
12345
|
|
45
|
-
|
|
46
|
-
Stars
|
|
47
|
-
|
|
48
|
-
How likely is it that you would recommend us to a friend or colleague?
|
|
49
|
-
12345678910
|
|
50
|
-
Not likely at allVery likely
|
|
28
|
+
1 2 3 4 5 6 7 8 9 10
|
|
29
|
+
Not likely at all Very likely
|
|
51
30
|
|
|
52
31
|
#### React (tsx)
|
|
53
32
|
|
|
@@ -309,33 +288,11 @@ export default () => {
|
|
|
309
288
|
|
|
310
289
|
Subtle request for usefulness
|
|
311
290
|
Was this helpful?
|
|
312
|
-
Not
|
|
313
|
-
|
|
314
|
-
Reset
|
|
315
|
-
|
|
316
|
-
Another variation of inline request for usefulness
|
|
317
|
-
|
|
318
|
-
Helpful
|
|
319
|
-
|
|
320
|
-
Not helpful
|
|
321
|
-
|
|
322
|
-
Reset
|
|
323
|
-
|
|
324
|
-
#### Summary
|
|
325
|
-
|
|
326
|
-
Subtle request for usefulness
|
|
327
|
-
Was this helpful?
|
|
328
|
-
Not reallyKind ofYes, it was
|
|
329
|
-
|
|
330
|
-
Reset
|
|
291
|
+
Not really Kind of Yes, it was Reset
|
|
331
292
|
|
|
332
293
|
Another variation of inline request for usefulness
|
|
333
|
-
|
|
334
294
|
Helpful
|
|
335
|
-
|
|
336
|
-
Not helpful
|
|
337
|
-
|
|
338
|
-
Reset
|
|
295
|
+
Not helpful Reset
|
|
339
296
|
|
|
340
297
|
#### React (tsx)
|
|
341
298
|
|
|
@@ -554,22 +511,6 @@ Nicht interessant für mich
|
|
|
554
511
|
|
|
555
512
|
Ich möchte mehr erfahren
|
|
556
513
|
|
|
557
|
-
#### Summary
|
|
558
|
-
|
|
559
|
-
Simple reaction without labels
|
|
560
|
-
|
|
561
|
-
Simple reaction without labels and hover colors
|
|
562
|
-
|
|
563
|
-
Small filled reaction with labels right
|
|
564
|
-
Bad
|
|
565
|
-
|
|
566
|
-
Good
|
|
567
|
-
|
|
568
|
-
Animated reaction with labels
|
|
569
|
-
Nicht interessant für mich
|
|
570
|
-
|
|
571
|
-
Ich möchte mehr erfahren
|
|
572
|
-
|
|
573
514
|
#### React (tsx)
|
|
574
515
|
|
|
575
516
|
```tsx
|