@rio-cloud/uikit-mcp 1.1.3 → 1.1.5
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 +1 -0
- package/dist/doc-metadata.json +97 -97
- package/dist/docs/components/accentBar.md +5 -5
- package/dist/docs/components/activity.md +7 -7
- package/dist/docs/components/animatedNumber.md +10 -10
- package/dist/docs/components/animatedTextReveal.md +42 -43
- package/dist/docs/components/animations.md +42 -34
- package/dist/docs/components/appHeader.md +20 -35
- package/dist/docs/components/appLayout.md +198 -221
- package/dist/docs/components/appNavigationBar.md +21 -21
- package/dist/docs/components/areaCharts.md +38 -38
- package/dist/docs/components/aspectRatioPlaceholder.md +4 -5
- package/dist/docs/components/assetTree.md +887 -614
- package/dist/docs/components/autosuggests.md +4 -4
- package/dist/docs/components/avatar.md +7 -7
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +173 -173
- package/dist/docs/components/barList.md +19 -41
- package/dist/docs/components/basicMap.md +1 -1
- package/dist/docs/components/bottomSheet.md +74 -74
- package/dist/docs/components/button.md +161 -71
- package/dist/docs/components/buttonToolbar.md +3 -3
- package/dist/docs/components/calendarStripe.md +71 -123
- package/dist/docs/components/card.md +4 -4
- 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 +56 -131
- package/dist/docs/components/clearableInput.md +23 -127
- package/dist/docs/components/collapse.md +14 -16
- package/dist/docs/components/composedCharts.md +31 -31
- package/dist/docs/components/contentLoader.md +125 -122
- package/dist/docs/components/dataTabs.md +103 -93
- package/dist/docs/components/datepickers.md +734 -764
- package/dist/docs/components/dialogs.md +299 -186
- package/dist/docs/components/divider.md +4 -4
- package/dist/docs/components/dropdowns.md +4555 -4498
- package/dist/docs/components/editableContent.md +97 -97
- package/dist/docs/components/expander.md +56 -56
- package/dist/docs/components/fade.md +41 -41
- package/dist/docs/components/fadeExpander.md +4 -4
- package/dist/docs/components/fadeUp.md +8 -10
- package/dist/docs/components/feedback.md +22 -21
- package/dist/docs/components/filePickers.md +25 -25
- package/dist/docs/components/formLabel.md +5 -7
- package/dist/docs/components/groupedItemList.md +37 -37
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +6 -6
- package/dist/docs/components/labeledElement.md +4 -3
- package/dist/docs/components/licensePlate.md +2 -2
- package/dist/docs/components/lineCharts.md +58 -58
- package/dist/docs/components/listMenu.md +63 -41
- package/dist/docs/components/loadMore.md +17 -17
- 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 +339 -345
- package/dist/docs/components/mapPolygon.md +16 -20
- package/dist/docs/components/mapRoute.md +14 -20
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +263 -274
- package/dist/docs/components/mapUtils.md +3 -5
- package/dist/docs/components/multiselects.md +1 -1
- package/dist/docs/components/noData.md +11 -11
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +39 -37
- package/dist/docs/components/onboarding.md +18 -38
- package/dist/docs/components/page.md +16 -16
- package/dist/docs/components/pager.md +8 -8
- package/dist/docs/components/pieCharts.md +124 -124
- package/dist/docs/components/popover.md +37 -53
- package/dist/docs/components/position.md +4 -4
- package/dist/docs/components/radialBarCharts.md +506 -506
- package/dist/docs/components/radiobutton.md +209 -191
- package/dist/docs/components/releaseNotes.md +9 -3
- package/dist/docs/components/resizer.md +7 -8
- package/dist/docs/components/responsiveColumnStripe.md +11 -11
- package/dist/docs/components/responsiveVideo.md +5 -5
- package/dist/docs/components/rioglyph.md +11 -11
- package/dist/docs/components/rules.md +118 -92
- package/dist/docs/components/saveableInput.md +366 -356
- package/dist/docs/components/selects.md +9996 -15
- package/dist/docs/components/sidebar.md +22 -23
- package/dist/docs/components/sliders.md +26 -26
- package/dist/docs/components/smoothScrollbars.md +61 -25
- package/dist/docs/components/spinners.md +32 -30
- package/dist/docs/components/states.md +236 -245
- package/dist/docs/components/statsWidgets.md +37 -28
- package/dist/docs/components/statusBar.md +22 -22
- package/dist/docs/components/stepButton.md +2 -2
- package/dist/docs/components/steppedProgressBars.md +45 -45
- package/dist/docs/components/subNavigation.md +3 -3
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +2 -38
- package/dist/docs/components/switch.md +11 -11
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +40 -40
- package/dist/docs/components/tags.md +21 -20
- package/dist/docs/components/teaser.md +22 -23
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +17 -13
- package/dist/docs/components/toggleButton.md +65 -29
- package/dist/docs/components/tooltip.md +27 -50
- package/dist/docs/components/virtualList.md +75 -75
- package/dist/docs/foundations.md +167 -167
- package/dist/docs/start/changelog.md +23 -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 +80 -27
- 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 +9 -9
- 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 +41 -41
- 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 +6 -3
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/routeUtils.md +59 -23
- 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 +7 -5
- 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 +58 -2
- 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 +54 -54
- package/dist/docs/utilities/useTableSelection.md +93 -93
- 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 -8
- package/dist/version.json +2 -2
- package/package.json +6 -6
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Application
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/sidebar
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:04:05.660Z
|
|
7
7
|
|
|
8
8
|
There are 2 kinds of Sidebars. The default fluid and the fly variant.
|
|
9
9
|
|
|
@@ -298,35 +298,34 @@ export default SidebarDemos;
|
|
|
298
298
|
|
|
299
299
|
| Name | Type | Default | Description |
|
|
300
300
|
| --- | --- | --- | --- |
|
|
301
|
-
| closed | boolean | false | Defines whether the component is hidden or not. |
|
|
302
301
|
| fly | boolean | false | Defines if the component will overlap the body content. |
|
|
303
|
-
|
|
|
304
|
-
|
|
|
305
|
-
|
|
|
306
|
-
|
|
|
302
|
+
| closed | boolean | false | Defines whether the component is hidden or not. |
|
|
303
|
+
| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |
|
|
304
|
+
| onClose | VoidFunction | — | Callback function triggered when clicking the close icon. |
|
|
305
|
+
| footer | string \| React.ReactNode | — | The Footer content. For example a save button. |
|
|
306
|
+
| footerClassName | string | — | Additional classes added to the Sidebar footer. |
|
|
307
|
+
| headerButtons | React.ReactNode | — | Additional buttons to be rendered in the header. |
|
|
308
|
+
| headerClassName | string | — | Additional classes added to the Sidebar header. |
|
|
309
|
+
| showHeaderBorder | boolean | — | Shows a sidebar header border |
|
|
310
|
+
| width | number | 350 | Defines the width of the component. The value is set as pixel value as inline style. Note: In the past, the type allowed to pass in a sting value like "400px" but that is not possible anymore due to internal width calculations. To be backwards compatible for non Typescript projects, the width is converted to a number. |
|
|
307
311
|
| minWidth | number | 100 | Defines the minimum width in px of the component that will take effect when resizing. |
|
|
308
312
|
| maxWidth | number | 800 | Defines the maximum width in px of the component that will take effect when resizing. |
|
|
309
|
-
| switchModeBreakpoint | number | 0 | Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0. |
|
|
310
|
-
| title | string \| ReactNode | — | Content that will be displayed in the components header. |
|
|
311
|
-
| footer | string \| ReactNode | — | The Footer content. For example a save button. |
|
|
312
|
-
| onClose | VoidFunction | () => {} | Callback function triggered when clicking the close icon. |
|
|
313
|
-
| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |
|
|
314
313
|
| openInFullscreen | boolean | false | Opens Sidebar in fullscreen, means 100vw. |
|
|
315
|
-
| onFullScreenChange | (newFullscreenState: boolean) => void |
|
|
314
|
+
| onFullScreenChange | (newFullscreenState: boolean) => void | — | Callback for when the fullscreen is toggled. |
|
|
316
315
|
| enableFullscreenToggle | boolean | false | Enables the fullscreen functionality and shows the fullscreen toggle. |
|
|
317
316
|
| fullscreenToggleTooltip | string | — | Translated tooltip text for the fullscreen toggle button. |
|
|
317
|
+
| position | ObjectValues<typeof SidebarPosition> | 'left' | Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Note: the position need to be set properly whe using the resize functionality to know on which side of the sidebar to attach the resizer handle. It is also relevant when the sidebar mode is set to fly to properly animate the sidebar into the view. Possible values are: 'left' 'right' Sidebar.LEFT Sidebar.RIGHT |
|
|
318
|
+
| resizable | boolean | false | Defines whether or not the sidebar is resizable. |
|
|
319
|
+
| onResizeEnd | VoidFunction | — | Callback for when the resize is done. |
|
|
320
|
+
| switchModeBreakpoint | number | — | Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0. |
|
|
318
321
|
| disableEsc | boolean | false | By default the fullscreen mode can be left with "esc". If this is unwanted it can be disabled. |
|
|
319
|
-
| className | string | — | Additional classes added on the wrapper element. |
|
|
320
|
-
| headerClassName | string | — | Additional classes added to the Sidebar header. |
|
|
321
|
-
| showHeaderBorder | boolean | — | Shows a sidebar header border |
|
|
322
|
-
| titleClassName | string | — | Additional classes added to the Sidebar title. |
|
|
323
|
-
| bodyClassName | string | — | Additional classes added to the Sidebar body. |
|
|
324
|
-
| footerClassName | string | — | Additional classes added to the Sidebar footer. |
|
|
325
|
-
| bodyRef | React.MutableRefObject<object> | — | Additional ref added to the Sidebar body. |
|
|
326
322
|
| hasBackdrop | boolean | false | Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside. |
|
|
327
|
-
| hasSmoothScrollbar | boolean | false | Defined whether or not the UIKIT SmoothScrollbar is active |
|
|
323
|
+
| hasSmoothScrollbar | boolean | false | Defined whether or not the UIKIT SmoothScrollbar is active. |
|
|
328
324
|
| makeBackdropVisible | boolean | false | Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs. |
|
|
329
|
-
| onBackdropClick | VoidFunction |
|
|
325
|
+
| onBackdropClick | VoidFunction | — | Callback for when the backdrop is clicked. This comes in handy when handling transient data from the sidebar which need to be saved first and handle clicks outside. |
|
|
326
|
+
| bodyRef | React.MutableRefObject<HTMLDivElement \| null> | — | Additional ref added to the Sidebar body. |
|
|
327
|
+
| title | string \| React.ReactNode | — | Content that will be displayed in the components header. |
|
|
328
|
+
| titleClassName | string | — | Additional classes added to the Sidebar title. |
|
|
330
329
|
| backdropClassName | string | — | Additional classes added to the Sidebar backdrop. |
|
|
331
|
-
|
|
|
332
|
-
|
|
|
330
|
+
| bodyClassName | string | — | Additional classes added to the Sidebar body. |
|
|
331
|
+
| className | string | — | Additional classes added on the wrapper element. |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/sliders
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:04:21.151Z
|
|
7
7
|
|
|
8
8
|
## Slider
|
|
9
9
|
|
|
@@ -229,19 +229,19 @@ export default SliderExample;
|
|
|
229
229
|
|
|
230
230
|
| Name | Type | Default | Description |
|
|
231
231
|
| --- | --- | --- | --- |
|
|
232
|
-
| value |
|
|
233
|
-
| minValue |
|
|
234
|
-
| maxValue |
|
|
235
|
-
| valueLabels |
|
|
236
|
-
|
|
|
237
|
-
|
|
|
238
|
-
|
|
|
239
|
-
| step |
|
|
240
|
-
| color |
|
|
241
|
-
| disabled |
|
|
242
|
-
| onChange | (newValue: number) => void |
|
|
243
|
-
| onDragEnd | (newValue: number) => void |
|
|
244
|
-
| className |
|
|
232
|
+
| value | number | 0 | The current value. |
|
|
233
|
+
| minValue | number | 0 | The lower limit. |
|
|
234
|
+
| maxValue | number | Number.MAX_VALUE | The upper limit. |
|
|
235
|
+
| valueLabels | boolean | false | Whether to show the value labels. |
|
|
236
|
+
| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value label. |
|
|
237
|
+
| hideValueBar | boolean | false | Whether to hide the dark-colored value bar. |
|
|
238
|
+
| largeValueLabels | boolean | false | Whether to show larger value labels instead of the normal ones. |
|
|
239
|
+
| step | number | 1 | Selector step value. |
|
|
240
|
+
| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
|
|
241
|
+
| disabled | boolean | false | Disables all pointer events. |
|
|
242
|
+
| onChange | (newValue: number) => void | — | Callback to get the new value every time it changes. |
|
|
243
|
+
| onDragEnd | (newValue: number) => void | — | Callback to get the value after the slider ended dragging. |
|
|
244
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
245
245
|
|
|
246
246
|
## RangeSlider
|
|
247
247
|
|
|
@@ -362,15 +362,15 @@ export default () => (
|
|
|
362
362
|
|
|
363
363
|
| Name | Type | Default | Description |
|
|
364
364
|
| --- | --- | --- | --- |
|
|
365
|
-
| leftValue |
|
|
366
|
-
| rightValue |
|
|
367
|
-
| minValue |
|
|
368
|
-
| maxValue |
|
|
369
|
-
| valueLabels |
|
|
370
|
-
| valueLabelUnit |
|
|
371
|
-
| step |
|
|
372
|
-
| color |
|
|
373
|
-
| disabled |
|
|
374
|
-
| onChange | (
|
|
375
|
-
| onDragEnd | (
|
|
376
|
-
| className |
|
|
365
|
+
| leftValue | number | — | The current left value of the selected range. |
|
|
366
|
+
| rightValue | number | — | The current right value of the selected range. |
|
|
367
|
+
| minValue | number | 0 | The lower limit. |
|
|
368
|
+
| maxValue | number | Number.MAX_VALUE | The upper limit. |
|
|
369
|
+
| valueLabels | boolean | false | Whether to show the value labels. |
|
|
370
|
+
| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value labels. |
|
|
371
|
+
| step | number | 1 | Selector step value. |
|
|
372
|
+
| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
|
|
373
|
+
| disabled | boolean | false | Disables all pointer events. |
|
|
374
|
+
| onChange | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the new value every time it changes. |
|
|
375
|
+
| onDragEnd | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the value after the slider ended dragging. |
|
|
376
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/smoothScrollbars
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:05:09.047Z
|
|
7
7
|
|
|
8
8
|
## SmoothScrollbars
|
|
9
9
|
|
|
@@ -108,10 +108,16 @@ export default () => (
|
|
|
108
108
|
|
|
109
109
|
| Name | Type | Default | Description |
|
|
110
110
|
| --- | --- | --- | --- |
|
|
111
|
-
| slideIn |
|
|
112
|
-
| largeTrack |
|
|
113
|
-
| trackOffset |
|
|
114
|
-
| className |
|
|
111
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
112
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
113
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
114
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
115
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
116
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
117
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
118
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
119
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
120
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
115
121
|
|
|
116
122
|
### Example: Slide in on hover
|
|
117
123
|
|
|
@@ -212,10 +218,16 @@ export default () => (
|
|
|
212
218
|
|
|
213
219
|
| Name | Type | Default | Description |
|
|
214
220
|
| --- | --- | --- | --- |
|
|
215
|
-
| slideIn |
|
|
216
|
-
| largeTrack |
|
|
217
|
-
| trackOffset |
|
|
218
|
-
| className |
|
|
221
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
222
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
223
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
224
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
225
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
226
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
227
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
228
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
229
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
230
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
219
231
|
|
|
220
232
|
### Example: Larger track
|
|
221
233
|
|
|
@@ -316,10 +328,16 @@ export default () => (
|
|
|
316
328
|
|
|
317
329
|
| Name | Type | Default | Description |
|
|
318
330
|
| --- | --- | --- | --- |
|
|
319
|
-
| slideIn |
|
|
320
|
-
| largeTrack |
|
|
321
|
-
| trackOffset |
|
|
322
|
-
| className |
|
|
331
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
332
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
333
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
334
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
335
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
336
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
337
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
338
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
339
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
340
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
323
341
|
|
|
324
342
|
### Example: Track with offset
|
|
325
343
|
|
|
@@ -420,10 +438,16 @@ export default () => (
|
|
|
420
438
|
|
|
421
439
|
| Name | Type | Default | Description |
|
|
422
440
|
| --- | --- | --- | --- |
|
|
423
|
-
| slideIn |
|
|
424
|
-
| largeTrack |
|
|
425
|
-
| trackOffset |
|
|
426
|
-
| className |
|
|
441
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
442
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
443
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
444
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
445
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
446
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
447
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
448
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
449
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
450
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
427
451
|
|
|
428
452
|
### Example: Horizontal Example
|
|
429
453
|
|
|
@@ -692,10 +716,16 @@ export default () => (
|
|
|
692
716
|
|
|
693
717
|
| Name | Type | Default | Description |
|
|
694
718
|
| --- | --- | --- | --- |
|
|
695
|
-
| slideIn |
|
|
696
|
-
| largeTrack |
|
|
697
|
-
| trackOffset |
|
|
698
|
-
| className |
|
|
719
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
720
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
721
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
722
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
723
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
724
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
725
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
726
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
727
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
728
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
699
729
|
|
|
700
730
|
### Example: Full Example
|
|
701
731
|
|
|
@@ -1174,7 +1204,13 @@ export default () => (
|
|
|
1174
1204
|
|
|
1175
1205
|
| Name | Type | Default | Description |
|
|
1176
1206
|
| --- | --- | --- | --- |
|
|
1177
|
-
| slideIn |
|
|
1178
|
-
| largeTrack |
|
|
1179
|
-
| trackOffset |
|
|
1180
|
-
| className |
|
|
1207
|
+
| slideIn | boolean | false | Defines whether the scrollbars should slide in on hover. |
|
|
1208
|
+
| largeTrack | boolean | false | Defines whether the scrollbars should be slightly larger. |
|
|
1209
|
+
| trackOffset | boolean | false | Defines whether the scrollbars should have an offset. |
|
|
1210
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
1211
|
+
| tagName | string | 'div' | Tag name used for the scroll container. |
|
|
1212
|
+
| autoHeight | boolean | false | Enable auto-height behavior. |
|
|
1213
|
+
| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |
|
|
1214
|
+
| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |
|
|
1215
|
+
| onScroll | (event: React.UIEvent<any> \| undefined) => void | — | Scroll callback, forwarded to the underlying scrollbars instance. |
|
|
1216
|
+
| style | React.CSSProperties | — | Inline styles for the scroll container. |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/spinners
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:05:07.959Z
|
|
7
7
|
|
|
8
8
|
## Spinner
|
|
9
9
|
|
|
@@ -137,13 +137,13 @@ export default () => (
|
|
|
137
137
|
|
|
138
138
|
| Name | Type | Default | Description |
|
|
139
139
|
| --- | --- | --- | --- |
|
|
140
|
-
| isInverse |
|
|
141
|
-
| isDoubleSized |
|
|
142
|
-
| isFullSized |
|
|
143
|
-
| isFullScreen |
|
|
144
|
-
| isInline |
|
|
145
|
-
| show |
|
|
146
|
-
| text |
|
|
140
|
+
| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
|
|
141
|
+
| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
|
|
142
|
+
| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
|
|
143
|
+
| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
|
|
144
|
+
| isInline | boolean | false | Renders the spinner without centered wrapper. |
|
|
145
|
+
| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
|
|
146
|
+
| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
|
|
147
147
|
|
|
148
148
|
## Spinner in Buttons
|
|
149
149
|
|
|
@@ -182,7 +182,7 @@ Spinner in icon only button .btn-loading .btn-icon-only
|
|
|
182
182
|
#### React (tsx)
|
|
183
183
|
|
|
184
184
|
```tsx
|
|
185
|
-
|
|
185
|
+
const SpinnerButtonsExample = () => (
|
|
186
186
|
<div>
|
|
187
187
|
<div className='form-group'>
|
|
188
188
|
<label>
|
|
@@ -250,6 +250,8 @@ export default () => (
|
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
252
|
);
|
|
253
|
+
|
|
254
|
+
export default SpinnerButtonsExample;
|
|
253
255
|
```
|
|
254
256
|
|
|
255
257
|
#### HTML (html)
|
|
@@ -372,13 +374,13 @@ export default () => (
|
|
|
372
374
|
|
|
373
375
|
| Name | Type | Default | Description |
|
|
374
376
|
| --- | --- | --- | --- |
|
|
375
|
-
| isInverse |
|
|
376
|
-
| isDoubleSized |
|
|
377
|
-
| isFullSized |
|
|
378
|
-
| isFullScreen |
|
|
379
|
-
| isInline |
|
|
380
|
-
| show |
|
|
381
|
-
| text |
|
|
377
|
+
| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
|
|
378
|
+
| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
|
|
379
|
+
| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
|
|
380
|
+
| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
|
|
381
|
+
| isInline | boolean | false | Renders the spinner without centered wrapper. |
|
|
382
|
+
| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
|
|
383
|
+
| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
|
|
382
384
|
|
|
383
385
|
## Spinner fullsized
|
|
384
386
|
|
|
@@ -441,13 +443,13 @@ export default () => {
|
|
|
441
443
|
|
|
442
444
|
| Name | Type | Default | Description |
|
|
443
445
|
| --- | --- | --- | --- |
|
|
444
|
-
| isInverse |
|
|
445
|
-
| isDoubleSized |
|
|
446
|
-
| isFullSized |
|
|
447
|
-
| isFullScreen |
|
|
448
|
-
| isInline |
|
|
449
|
-
| show |
|
|
450
|
-
| text |
|
|
446
|
+
| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
|
|
447
|
+
| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
|
|
448
|
+
| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
|
|
449
|
+
| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
|
|
450
|
+
| isInline | boolean | false | Renders the spinner without centered wrapper. |
|
|
451
|
+
| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
|
|
452
|
+
| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
|
|
451
453
|
|
|
452
454
|
## Spinner fullscreen
|
|
453
455
|
|
|
@@ -497,10 +499,10 @@ export default () => {
|
|
|
497
499
|
|
|
498
500
|
| Name | Type | Default | Description |
|
|
499
501
|
| --- | --- | --- | --- |
|
|
500
|
-
| isInverse |
|
|
501
|
-
| isDoubleSized |
|
|
502
|
-
| isFullSized |
|
|
503
|
-
| isFullScreen |
|
|
504
|
-
| isInline |
|
|
505
|
-
| show |
|
|
506
|
-
| text |
|
|
502
|
+
| isInverse | boolean | false | Defines whether the spinner is shown on bright or dark background. |
|
|
503
|
+
| isDoubleSized | boolean | false | If set to "true" the spinner will be rendered twice as big. |
|
|
504
|
+
| isFullSized | boolean | false | Renders the spinner as overlay in full-size mode. This will be relative to the parent container. Set the parent element to "position-relative" in this case. |
|
|
505
|
+
| isFullScreen | boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
|
|
506
|
+
| isInline | boolean | false | Renders the spinner without centered wrapper. |
|
|
507
|
+
| show | boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen. |
|
|
508
|
+
| text | string \| React.ReactNode | — | The text shown next to the spinner icon. |
|