@rio-cloud/uikit-mcp 1.0.0 → 1.1.0
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 +75 -40
- package/dist/doc-metadata.json +1872 -0
- package/dist/docs/components/accentBar.md +582 -0
- package/dist/docs/components/activity.md +330 -0
- package/dist/docs/components/animatedNumber.md +88 -0
- package/dist/docs/components/animatedTextReveal.md +381 -0
- package/dist/docs/components/animations.md +459 -0
- package/dist/docs/components/appHeader.md +737 -0
- package/dist/docs/components/appLayout.md +2016 -0
- package/dist/docs/components/appNavigationBar.md +274 -0
- package/dist/docs/components/areaCharts.md +828 -0
- package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
- package/dist/docs/components/assetTree.md +3223 -0
- package/dist/docs/components/autosuggests.md +1177 -0
- package/dist/docs/components/avatar.md +206 -0
- package/dist/docs/components/banner.md +668 -0
- package/dist/docs/components/barCharts.md +2785 -0
- package/dist/docs/components/barList.md +517 -0
- package/dist/docs/components/basicMap.md +167 -0
- package/dist/docs/components/bottomSheet.md +721 -0
- package/dist/docs/components/button.md +775 -0
- package/dist/docs/components/buttonToolbar.md +134 -0
- package/dist/docs/components/calendarStripe.md +525 -0
- package/dist/docs/components/card.md +86 -0
- package/dist/docs/components/carousel.md +128 -0
- package/dist/docs/components/chartColors.md +716 -0
- package/dist/docs/components/chartsGettingStarted.md +28 -0
- package/dist/docs/components/chat.md +932 -0
- package/dist/docs/components/checkbox.md +996 -0
- package/dist/docs/components/clearableInput.md +806 -0
- package/dist/docs/components/collapse.md +189 -0
- package/dist/docs/components/composedCharts.md +424 -0
- package/dist/docs/components/contentLoader.md +674 -0
- package/dist/docs/components/dataTabs.md +1251 -0
- package/dist/docs/components/datepickers.md +2543 -0
- package/dist/docs/components/dialogs.md +2244 -0
- package/dist/docs/components/divider.md +219 -0
- package/dist/docs/components/dropdowns.md +17550 -0
- package/dist/docs/components/editableContent.md +1127 -0
- package/dist/docs/components/expander.md +970 -0
- package/dist/docs/components/fade.md +836 -0
- package/dist/docs/components/fadeExpander.md +180 -0
- package/dist/docs/components/fadeUp.md +396 -0
- package/dist/docs/components/feedback.md +758 -0
- package/dist/docs/components/filePickers.md +370 -0
- package/dist/docs/components/formLabel.md +251 -0
- package/dist/docs/components/fullscreenMap.md +10 -0
- package/dist/docs/components/groupedItemList.md +1001 -0
- package/dist/docs/components/iconList.md +306 -0
- package/dist/docs/components/imagePreloader.md +167 -0
- package/dist/docs/components/labeledElement.md +115 -0
- package/dist/docs/components/licensePlate.md +412 -0
- package/dist/docs/components/lineCharts.md +2014 -0
- package/dist/docs/components/listMenu.md +392 -0
- package/dist/docs/components/loadMore.md +219 -0
- package/dist/docs/components/mainNavigation.md +129 -0
- package/dist/docs/components/mapCircle.md +93 -0
- package/dist/docs/components/mapCluster.md +337 -0
- package/dist/docs/components/mapContext.md +284 -0
- package/dist/docs/components/mapDraggableMarker.md +150 -0
- package/dist/docs/components/mapGettingStarted.md +39 -0
- package/dist/docs/components/mapInfoBubble.md +135 -0
- package/dist/docs/components/mapLayerGroup.md +94 -0
- package/dist/docs/components/mapMarker.md +1814 -0
- package/dist/docs/components/mapPolygon.md +959 -0
- package/dist/docs/components/mapRoute.md +3816 -0
- package/dist/docs/components/mapRouteGenerator.md +6 -0
- package/dist/docs/components/mapSettings.md +1040 -0
- package/dist/docs/components/mapUtils.md +132 -0
- package/dist/docs/components/multiselects.md +1921 -0
- package/dist/docs/components/noData.md +210 -0
- package/dist/docs/components/notifications.md +314 -0
- package/dist/docs/components/numbercontrol.md +706 -0
- package/dist/docs/components/onboarding.md +297 -0
- package/dist/docs/components/page.md +241 -0
- package/dist/docs/components/pager.md +133 -0
- package/dist/docs/components/pieCharts.md +1284 -0
- package/dist/docs/components/popover.md +222 -0
- package/dist/docs/components/position.md +50 -0
- package/dist/docs/components/radialBarCharts.md +3663 -0
- package/dist/docs/components/radiobutton.md +1271 -0
- package/dist/docs/components/releaseNotes.md +135 -0
- package/dist/docs/components/resizer.md +162 -0
- package/dist/docs/components/responsiveColumnStripe.md +435 -0
- package/dist/docs/components/responsiveVideo.md +71 -0
- package/dist/docs/components/rioglyph.md +331 -0
- package/dist/docs/components/rules.md +965 -0
- package/dist/docs/components/saveableInput.md +1721 -0
- package/dist/docs/components/selects.md +1993 -0
- package/dist/docs/components/sidebar.md +332 -0
- package/dist/docs/components/sliders.md +376 -0
- package/dist/docs/components/smoothScrollbars.md +1180 -0
- package/dist/docs/components/spinners.md +506 -0
- package/dist/docs/components/states.md +1176 -0
- package/dist/docs/components/statsWidgets.md +636 -0
- package/dist/docs/components/statusBar.md +644 -0
- package/dist/docs/components/stepButton.md +61 -0
- package/dist/docs/components/steppedProgressBars.md +1064 -0
- package/dist/docs/components/subNavigation.md +470 -0
- package/dist/docs/components/supportMarker.md +115 -0
- package/dist/docs/components/svgImage.md +248 -0
- package/dist/docs/components/switch.md +554 -0
- package/dist/docs/components/tables.md +8 -0
- package/dist/docs/components/tagManager.md +476 -0
- package/dist/docs/components/tags.md +785 -0
- package/dist/docs/components/teaser.md +925 -0
- package/dist/docs/components/timeline.md +514 -0
- package/dist/docs/components/timepicker.md +262 -0
- package/dist/docs/components/toggleButton.md +178 -0
- package/dist/docs/components/tooltip.md +454 -0
- package/dist/docs/components/virtualList.md +483 -0
- package/dist/docs/foundations.md +20901 -0
- package/dist/docs/start/changelog.md +439 -0
- package/dist/docs/start/goodtoknow.md +14 -0
- package/dist/docs/start/guidelines/color-combinations.md +678 -0
- package/dist/docs/start/guidelines/custom-css.md +42 -0
- package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
- package/dist/docs/start/guidelines/formatting.md +587 -0
- package/dist/docs/start/guidelines/iframe.md +323 -0
- package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
- package/dist/docs/start/guidelines/print-css.md +36 -0
- package/dist/docs/start/guidelines/spinner.md +710 -0
- package/dist/docs/start/guidelines/supported-browsers.md +10 -0
- package/dist/docs/start/guidelines/writing.md +635 -0
- package/dist/docs/start/howto.md +187 -0
- package/dist/docs/start/intro.md +43 -0
- package/dist/docs/start/responsiveness.md +98 -0
- package/dist/docs/templates/common-table.md +1111 -0
- package/dist/docs/templates/detail-views.md +942 -0
- package/dist/docs/templates/expandable-details.md +228 -0
- package/dist/docs/templates/feature-cards.md +549 -0
- package/dist/docs/templates/form-summary.md +199 -0
- package/dist/docs/templates/form-toggle.md +367 -0
- package/dist/docs/templates/list-blocks.md +1021 -0
- package/dist/docs/templates/loading-progress.md +109 -0
- package/dist/docs/templates/options-panel.md +152 -0
- package/dist/docs/templates/panel-variants.md +164 -0
- package/dist/docs/templates/progress-cards.md +607 -0
- package/dist/docs/templates/progress-success.md +142 -0
- package/dist/docs/templates/settings-form.md +434 -0
- package/dist/docs/templates/stats-blocks.md +1381 -0
- package/dist/docs/templates/table-panel.md +184 -0
- package/dist/docs/templates/table-row-animation.md +317 -0
- package/dist/docs/templates/usage-cards.md +227 -0
- package/dist/docs/utilities/deviceUtils.md +123 -0
- package/dist/docs/utilities/featureToggles.md +90 -0
- package/dist/docs/utilities/fuelTypeUtils.md +186 -0
- package/dist/docs/utilities/routeUtils.md +138 -0
- package/dist/docs/utilities/useAfterMount.md +66 -0
- package/dist/docs/utilities/useAutoAnimate.md +193 -0
- package/dist/docs/utilities/useAverage.md +95 -0
- package/dist/docs/utilities/useClickOutside.md +61 -0
- package/dist/docs/utilities/useClipboard.md +93 -0
- package/dist/docs/utilities/useCount.md +178 -0
- package/dist/docs/utilities/useDarkMode.md +49 -0
- package/dist/docs/utilities/useDebugInfo.md +126 -0
- package/dist/docs/utilities/useEffectOnce.md +58 -0
- package/dist/docs/utilities/useElapsedTime.md +58 -0
- package/dist/docs/utilities/useElementSize.md +71 -0
- package/dist/docs/utilities/useEsc.md +58 -0
- package/dist/docs/utilities/useEvent.md +64 -0
- package/dist/docs/utilities/useFocusTrap.md +85 -0
- package/dist/docs/utilities/useFullscreen.md +198 -0
- package/dist/docs/utilities/useHover.md +55 -0
- package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
- package/dist/docs/utilities/useInterval.md +85 -0
- package/dist/docs/utilities/useIsFocusWithin.md +114 -0
- package/dist/docs/utilities/useKey.md +151 -0
- package/dist/docs/utilities/useLocalStorage.md +91 -0
- package/dist/docs/utilities/useLocationSuggestions.md +114 -0
- package/dist/docs/utilities/useMax.md +62 -0
- package/dist/docs/utilities/useMin.md +78 -0
- package/dist/docs/utilities/useMutationObserver.md +113 -0
- package/dist/docs/utilities/useOnScreen.md +138 -0
- package/dist/docs/utilities/useOnlineStatus.md +49 -0
- package/dist/docs/utilities/usePostMessage.md +117 -0
- package/dist/docs/utilities/usePostMessageSender.md +257 -0
- package/dist/docs/utilities/usePrevious.md +101 -0
- package/dist/docs/utilities/useResizeObserver.md +151 -0
- package/dist/docs/utilities/useScrollPosition.md +252 -0
- package/dist/docs/utilities/useSearch.md +228 -0
- package/dist/docs/utilities/useSorting.md +389 -0
- package/dist/docs/utilities/useStateWithValidation.md +83 -0
- package/dist/docs/utilities/useSum.md +155 -0
- package/dist/docs/utilities/useTableExport.md +404 -0
- package/dist/docs/utilities/useTableSelection.md +1120 -0
- package/dist/docs/utilities/useTimeout.md +55 -0
- package/dist/docs/utilities/useToggle.md +115 -0
- package/dist/docs/utilities/useWindowResize.md +70 -0
- package/dist/index.mjs +271 -0
- package/dist/search-synonyms.json +134 -0
- package/dist/version.json +4 -0
- package/package.json +23 -19
- package/bin/uikit-mcp.mjs +0 -23
- package/data/pages/Components/components/accentbar.json +0 -207
- package/data/pages/Components/components/activity.json +0 -87
- package/data/pages/Components/components/animatednumber.json +0 -99
- package/data/pages/Components/components/animations.json +0 -87
- package/data/pages/Components/components/appheader.json +0 -291
- package/data/pages/Components/components/applayout.json +0 -1198
- package/data/pages/Components/components/appnavigationbar.json +0 -327
- package/data/pages/Components/components/areacharts.json +0 -563
- package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
- package/data/pages/Components/components/assettree.json +0 -3080
- package/data/pages/Components/components/autosuggests.json +0 -710
- package/data/pages/Components/components/avatar.json +0 -157
- package/data/pages/Components/components/banner.json +0 -599
- package/data/pages/Components/components/barcharts.json +0 -1507
- package/data/pages/Components/components/barlist.json +0 -223
- package/data/pages/Components/components/basicmap.json +0 -68
- package/data/pages/Components/components/bottomsheet.json +0 -601
- package/data/pages/Components/components/button.json +0 -583
- package/data/pages/Components/components/buttontoolbar.json +0 -63
- package/data/pages/Components/components/calendarstripe.json +0 -235
- package/data/pages/Components/components/card.json +0 -69
- package/data/pages/Components/components/carousel.json +0 -39
- package/data/pages/Components/components/chartcolors.json +0 -34
- package/data/pages/Components/components/chartsgettingstarted.json +0 -32
- package/data/pages/Components/components/chat.json +0 -39
- package/data/pages/Components/components/checkbox.json +0 -847
- package/data/pages/Components/components/clearableinput.json +0 -789
- package/data/pages/Components/components/collapse.json +0 -175
- package/data/pages/Components/components/composedcharts.json +0 -159
- package/data/pages/Components/components/contentloader.json +0 -233
- package/data/pages/Components/components/datatabs.json +0 -680
- package/data/pages/Components/components/datepickers.json +0 -287
- package/data/pages/Components/components/dialogs.json +0 -1492
- package/data/pages/Components/components/divider.json +0 -93
- package/data/pages/Components/components/dropdowns.json +0 -936
- package/data/pages/Components/components/editablecontent.json +0 -1117
- package/data/pages/Components/components/expander.json +0 -377
- package/data/pages/Components/components/fade.json +0 -403
- package/data/pages/Components/components/fadeexpander.json +0 -75
- package/data/pages/Components/components/fadeup.json +0 -127
- package/data/pages/Components/components/feedback.json +0 -269
- package/data/pages/Components/components/filepickers.json +0 -269
- package/data/pages/Components/components/formlabel.json +0 -115
- package/data/pages/Components/components/fullscreenmap.json +0 -22
- package/data/pages/Components/components/groupeditemlist.json +0 -323
- package/data/pages/Components/components/iconlist.json +0 -45
- package/data/pages/Components/components/imagepreloader.json +0 -81
- package/data/pages/Components/components/labeledelement.json +0 -75
- package/data/pages/Components/components/licenseplate.json +0 -69
- package/data/pages/Components/components/linecharts.json +0 -987
- package/data/pages/Components/components/listmenu.json +0 -313
- package/data/pages/Components/components/loadmore.json +0 -175
- package/data/pages/Components/components/mainnavigation.json +0 -39
- package/data/pages/Components/components/mapcircle.json +0 -34
- package/data/pages/Components/components/mapcluster.json +0 -51
- package/data/pages/Components/components/mapcontext.json +0 -105
- package/data/pages/Components/components/mapdraggablemarker.json +0 -34
- package/data/pages/Components/components/mapgettingstarted.json +0 -27
- package/data/pages/Components/components/mapgroup.json +0 -1198
- package/data/pages/Components/components/mapinfobubble.json +0 -34
- package/data/pages/Components/components/maplayergroup.json +0 -34
- package/data/pages/Components/components/mapmarker.json +0 -700
- package/data/pages/Components/components/mappolygon.json +0 -45
- package/data/pages/Components/components/maproute.json +0 -623
- package/data/pages/Components/components/maproutegenerator.json +0 -16
- package/data/pages/Components/components/mapsettings.json +0 -51
- package/data/pages/Components/components/maputils.json +0 -34
- package/data/pages/Components/components/multiselects.json +0 -1451
- package/data/pages/Components/components/nodata.json +0 -139
- package/data/pages/Components/components/notifications.json +0 -65
- package/data/pages/Components/components/numbercontrol.json +0 -301
- package/data/pages/Components/components/onboarding.json +0 -302
- package/data/pages/Components/components/page.json +0 -197
- package/data/pages/Components/components/pager.json +0 -93
- package/data/pages/Components/components/piecharts.json +0 -731
- package/data/pages/Components/components/popover.json +0 -251
- package/data/pages/Components/components/position.json +0 -69
- package/data/pages/Components/components/radialbarcharts.json +0 -1304
- package/data/pages/Components/components/radiobutton.json +0 -1105
- package/data/pages/Components/components/releasenotes.json +0 -44
- package/data/pages/Components/components/resizer.json +0 -93
- package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
- package/data/pages/Components/components/responsivevideo.json +0 -75
- package/data/pages/Components/components/rioglyph.json +0 -93
- package/data/pages/Components/components/rules.json +0 -410
- package/data/pages/Components/components/saveableinput.json +0 -703
- package/data/pages/Components/components/selects.json +0 -701
- package/data/pages/Components/components/sidebar.json +0 -243
- package/data/pages/Components/components/sliders.json +0 -235
- package/data/pages/Components/components/smoothscrollbars.json +0 -335
- package/data/pages/Components/components/spinners.json +0 -343
- package/data/pages/Components/components/states.json +0 -1705
- package/data/pages/Components/components/statswidgets.json +0 -314
- package/data/pages/Components/components/statusbar.json +0 -177
- package/data/pages/Components/components/stepbutton.json +0 -57
- package/data/pages/Components/components/steppedprogressbars.json +0 -417
- package/data/pages/Components/components/subnavigation.json +0 -107
- package/data/pages/Components/components/supportmarker.json +0 -45
- package/data/pages/Components/components/svgimage.json +0 -81
- package/data/pages/Components/components/switch.json +0 -111
- package/data/pages/Components/components/tables.json +0 -144
- package/data/pages/Components/components/tagmanager.json +0 -86
- package/data/pages/Components/components/tags.json +0 -146
- package/data/pages/Components/components/teaser.json +0 -188
- package/data/pages/Components/components/timeline.json +0 -45
- package/data/pages/Components/components/timepicker.json +0 -163
- package/data/pages/Components/components/togglebutton.json +0 -247
- package/data/pages/Components/components/tooltip.json +0 -270
- package/data/pages/Components/components/virtuallist.json +0 -175
- package/data/pages/Foundations/foundations.json +0 -2475
- package/data/pages/Getting-started/start/changelog.json +0 -22
- package/data/pages/Getting-started/start/goodtoknow.json +0 -32
- package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
- package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
- package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
- package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
- package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
- package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
- package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
- package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
- package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
- package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
- package/data/pages/Getting-started/start/howto.json +0 -72
- package/data/pages/Getting-started/start/intro.json +0 -37
- package/data/pages/Getting-started/start/responsiveness.json +0 -52
- package/data/pages/Templates/templates/common-table.json +0 -39
- package/data/pages/Templates/templates/detail-views.json +0 -71
- package/data/pages/Templates/templates/expandable-details.json +0 -39
- package/data/pages/Templates/templates/feature-cards.json +0 -103
- package/data/pages/Templates/templates/form-summary.json +0 -39
- package/data/pages/Templates/templates/form-toggle.json +0 -39
- package/data/pages/Templates/templates/list-blocks.json +0 -119
- package/data/pages/Templates/templates/loading-progress.json +0 -39
- package/data/pages/Templates/templates/options-panel.json +0 -39
- package/data/pages/Templates/templates/panel-variants.json +0 -39
- package/data/pages/Templates/templates/progress-cards.json +0 -71
- package/data/pages/Templates/templates/progress-success.json +0 -39
- package/data/pages/Templates/templates/settings-form.json +0 -39
- package/data/pages/Templates/templates/stats-blocks.json +0 -135
- package/data/pages/Templates/templates/table-panel.json +0 -39
- package/data/pages/Templates/templates/table-row-animation.json +0 -39
- package/data/pages/Templates/templates/usage-cards.json +0 -39
- package/data/pages/Utilities/utilities/deviceutils.json +0 -39
- package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
- package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
- package/data/pages/Utilities/utilities/routeutils.json +0 -34
- package/data/pages/Utilities/utilities/useaftermount.json +0 -63
- package/data/pages/Utilities/utilities/useaverage.json +0 -86
- package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
- package/data/pages/Utilities/utilities/useclipboard.json +0 -57
- package/data/pages/Utilities/utilities/usecount.json +0 -92
- package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
- package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
- package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
- package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
- package/data/pages/Utilities/utilities/useelementsize.json +0 -63
- package/data/pages/Utilities/utilities/useesc.json +0 -57
- package/data/pages/Utilities/utilities/useevent.json +0 -75
- package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
- package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
- package/data/pages/Utilities/utilities/usehover.json +0 -57
- package/data/pages/Utilities/utilities/useinterval.json +0 -63
- package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
- package/data/pages/Utilities/utilities/usekey.json +0 -75
- package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
- package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
- package/data/pages/Utilities/utilities/usemax.json +0 -86
- package/data/pages/Utilities/utilities/usemin.json +0 -86
- package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
- package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
- package/data/pages/Utilities/utilities/useonscreen.json +0 -63
- package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
- package/data/pages/Utilities/utilities/useprevious.json +0 -63
- package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
- package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
- package/data/pages/Utilities/utilities/usesearch.json +0 -197
- package/data/pages/Utilities/utilities/usesorting.json +0 -139
- package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
- package/data/pages/Utilities/utilities/usesum.json +0 -86
- package/data/pages/Utilities/utilities/usetableexport.json +0 -87
- package/data/pages/Utilities/utilities/usetableselection.json +0 -311
- package/data/pages/Utilities/utilities/usetimeout.json +0 -63
- package/data/pages/Utilities/utilities/usetoggle.json +0 -75
- package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
- package/data/version.json +0 -4
- package/docs/content-schema.md +0 -147
- package/docs/navigation-inventory.json +0 -1310
- package/docs/search-synonyms.json +0 -43
- package/server/index.mjs +0 -268
- package/server/lib/load-docs.mjs +0 -48
- package/server/lib/normalise-doc.mjs +0 -220
- package/server/lib/render-markdown.mjs +0 -82
- package/server/lib/search-index.mjs +0 -49
- package/server/lib/types.js +0 -99
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
# Iframe guidelines
|
|
2
|
+
|
|
3
|
+
*Category:* Getting started
|
|
4
|
+
*Section:* Guidelines
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#start/guidelines/iframe
|
|
6
|
+
*Captured:* 2025-12-12T12:38:03.531Z
|
|
7
|
+
|
|
8
|
+
When having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class="is-iframe-widget">
|
|
9
|
+
|
|
10
|
+
## Iframe guidelines
|
|
11
|
+
|
|
12
|
+
## Working with iframes
|
|
13
|
+
|
|
14
|
+
The window-iframe class will be added by the RIO UIKIT automatically, but you have to add the RIO Pageloader to your SPA for that.
|
|
15
|
+
|
|
16
|
+
To integrate a widget iframe seamlessly and to avoid scrolling within an iframe, we use the 3rd party lib iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. Both views, the parent (which displays the iframe) and the child (which is the iframe content) needs to import the iframe-resizer.
|
|
17
|
+
|
|
18
|
+
**Parent application**
|
|
19
|
+
|
|
20
|
+
Use this if you want to embed an iframe into your application.
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
import IframeResizer from 'iframe-resizer-react';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
**Child application**
|
|
27
|
+
|
|
28
|
+
Use this if your application is a widget and will be embedded into other applications via an iframe.
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
npm install iframe-resizer --save
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
For more information vist https://github.com/davidjbradshaw/iframe-resizer
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
import iframeResizerContentWindow from 'iframe-resizer/js/iframeResizer.contentWindow';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
or simply
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
import 'iframe-resizer/js/iframeResizer.contentWindow';
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Alternatively, you can add the iframe contentWindow script from a public CDN into yourindex.html
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<script
|
|
50
|
+
defer
|
|
51
|
+
type='text/javascript'
|
|
52
|
+
src='https://cdn.rio.cloud/libs/iframeResizer/4.2.8/iframeResizer.contentWindow.min.js'
|
|
53
|
+
></script>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Example: Example 1
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
#### Summary
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
#### React (tsx)
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import IframeResizer from 'iframe-resizer-react';
|
|
68
|
+
|
|
69
|
+
const IFrameWidgetExample = () => (
|
|
70
|
+
<div className='display-flex justify-content-center'>
|
|
71
|
+
<div className='iframe-wrapper width-400'>
|
|
72
|
+
<IframeResizer src='https://menu.rio.cloud' />
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
export default IFrameWidgetExample;
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### HTML (html)
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<div class="display-flex justify-content-center">
|
|
84
|
+
<div class="iframe-wrapper width-400">
|
|
85
|
+
<iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 250px;">
|
|
86
|
+
</iframe>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## iframe in Fullscreen Dialog
|
|
92
|
+
|
|
93
|
+
When having an iframe within a Dialog, for example to display a full fledged SPA, there are two ways to hide the SPA navigation. The best and cleanest way is to hide the navigation in the SPA, when it is loaded in an iframe. Another way is to use our no-application-header class. The iframe then has to be wrapped in a iframe-wrapper element.
|
|
94
|
+
|
|
95
|
+
RIO iframes are transparent by default, also the SPA itself. Because of that you have to add the class "bg-lighter" to the iframe.
|
|
96
|
+
|
|
97
|
+
## Additional iframe classes
|
|
98
|
+
|
|
99
|
+
- Use unstyled to remove default iframe styling (Not necessary for widgets when using the iframe-resizer)
|
|
100
|
+
- Use full-width for a full width iframe (Not necessary for widgets when using the iframe-resizer)
|
|
101
|
+
- Use full-window for a full window (height/width) iframe based in the parent container
|
|
102
|
+
- Use no-application-header for adding a -50px offset to hide the SPA navigation. Better solution is to not render the navigation within the iframe!
|
|
103
|
+
- Use bg-XXX for having a iframe background color, as the default is transparent
|
|
104
|
+
|
|
105
|
+
### Example: Example 2
|
|
106
|
+
|
|
107
|
+
Open fullscreen dialog
|
|
108
|
+
|
|
109
|
+
#### Summary
|
|
110
|
+
|
|
111
|
+
Open fullscreen dialog
|
|
112
|
+
|
|
113
|
+
#### React (tsx)
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { useState, useRef } from 'react';
|
|
117
|
+
|
|
118
|
+
import Dialog from '@rio-cloud/rio-uikit/Dialog';
|
|
119
|
+
import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';
|
|
120
|
+
import Tooltip from '@rio-cloud/rio-uikit/Tooltip';
|
|
121
|
+
import Button from '@rio-cloud/rio-uikit/Button';
|
|
122
|
+
|
|
123
|
+
const IFrameInDialogExample = () => {
|
|
124
|
+
const [showDialog, setShowDialog] = useState(false);
|
|
125
|
+
|
|
126
|
+
const iframeRef = useRef<HTMLIFrameElement>(null);
|
|
127
|
+
|
|
128
|
+
const handleOpenInNewWindow = () => {
|
|
129
|
+
const currentIframeUrl = iframeRef.current?.contentWindow?.location.href;
|
|
130
|
+
window.open(currentIframeUrl, '_blank');
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
const body = (
|
|
134
|
+
<div className='iframe-wrapper'>
|
|
135
|
+
<iframe
|
|
136
|
+
title='uikit in fullscreen dialog'
|
|
137
|
+
className='unstyled bg-lighter full-window no-application-header'
|
|
138
|
+
src='/#start/intro'
|
|
139
|
+
ref={iframeRef}
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
143
|
+
|
|
144
|
+
const headerButtons = (
|
|
145
|
+
<OverlayTrigger placement='bottom' overlay={<Tooltip width='auto'>Open in new window</Tooltip>}>
|
|
146
|
+
<Button bsStyle='muted' iconOnly onClick={handleOpenInNewWindow}>
|
|
147
|
+
<span className='rioglyph rioglyph-new-window' />
|
|
148
|
+
</Button>
|
|
149
|
+
</OverlayTrigger>
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
return (
|
|
153
|
+
<>
|
|
154
|
+
<Button onClick={() => setShowDialog(true)}>
|
|
155
|
+
<span>Open fullscreen dialog</span>
|
|
156
|
+
</Button>
|
|
157
|
+
<Dialog
|
|
158
|
+
show={showDialog}
|
|
159
|
+
title='Service in a dialog'
|
|
160
|
+
bodyClassName='padding-0'
|
|
161
|
+
body={body}
|
|
162
|
+
onClose={() => setShowDialog(false)}
|
|
163
|
+
showCloseButton
|
|
164
|
+
bsSize={Dialog.SIZE_FULL_SCREEN}
|
|
165
|
+
headerButtons={headerButtons}
|
|
166
|
+
/>
|
|
167
|
+
</>
|
|
168
|
+
);
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
export default IFrameInDialogExample;
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
#### HTML (html)
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<div class="iframe-wrapper">
|
|
178
|
+
<iframe class="unstyled full-window no-application-header bg-lighter" src="https://..." />
|
|
179
|
+
</div>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Open a widget dialog in the parent application
|
|
183
|
+
|
|
184
|
+
When it comes to opening a modal dialog from within an iframe, there's flexibility in how it can be presented. Depending on the context, the dialog might overlay the iframe content itself or seamlessly cover the entire parent application.
|
|
185
|
+
|
|
186
|
+
For opening a dialog in the parent application, the process typically involves sending a postMessage event from the iframe to the parent window. Upon receiving this event, the parent application responds by rendering a simple dialog, such as an InfoDialog, which includes another iframe pointing to a specific route within the widget. This embedded view then displays the dialog content and manages the dialog's close events. When it's time to close the dialog, the embedded view sends another postMessage to the parent application. This event allows the dialog view to send any necessary data back to the originating iframe.
|
|
187
|
+
|
|
188
|
+
### Example: Example 3
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
#### Summary
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
#### React (tsx)
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
import React from 'react';
|
|
200
|
+
import IframeResizer from 'iframe-resizer-react';
|
|
201
|
+
|
|
202
|
+
import FrameDialog from '../../../../../../src/FrameDialog';
|
|
203
|
+
import { PREFIX } from '../../../widgets/WidgetDemo';
|
|
204
|
+
|
|
205
|
+
const IFrameWidgetExample = React.memo(() => {
|
|
206
|
+
return (
|
|
207
|
+
<>
|
|
208
|
+
<div className='iframe-wrapper'>
|
|
209
|
+
<IframeResizer
|
|
210
|
+
id='widgetDialogFrame'
|
|
211
|
+
src={`${window.location.origin}${window.location.pathname}#widgetDemo`}
|
|
212
|
+
className='unstyled width-100pct'
|
|
213
|
+
style={{ width: '1px', minWidth: '100%' }}
|
|
214
|
+
/>
|
|
215
|
+
</div>
|
|
216
|
+
<FrameDialog
|
|
217
|
+
eventPrefix={PREFIX}
|
|
218
|
+
getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}
|
|
219
|
+
/>
|
|
220
|
+
</>
|
|
221
|
+
);
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
export default IFrameWidgetExample;
|
|
225
|
+
|
|
226
|
+
// ----------------------------------------------------------
|
|
227
|
+
import { useState } from 'react';
|
|
228
|
+
|
|
229
|
+
import Button from '../../../../src/Button';
|
|
230
|
+
import { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, type OPEN_DIALOG_EVENT_TYPE } from '../../../../src/FrameDialog';
|
|
231
|
+
import usePostMessage, { type RemoteAction } from '../../../../src/usePostMessage';
|
|
232
|
+
|
|
233
|
+
export const PREFIX = 'EVENT_UIKIT_WIDGET_DEMO';
|
|
234
|
+
|
|
235
|
+
const WidgetDemo = () => {
|
|
236
|
+
const [messageFromDialog, setMessageFromDialog] = useState('-');
|
|
237
|
+
|
|
238
|
+
const { sendMessageToParent } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {
|
|
239
|
+
console.log(remoteAction);
|
|
240
|
+
|
|
241
|
+
if (remoteAction.type === `${PREFIX}${CLOSE_DIALOG_EVENT}`) {
|
|
242
|
+
setMessageFromDialog(remoteAction.payload);
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
const handleOpenDialog = () => {
|
|
247
|
+
const payload: OPEN_DIALOG_EVENT_TYPE = {
|
|
248
|
+
src: `${window.location.origin}${window.location.pathname}#widgetDemoDialog`,
|
|
249
|
+
dialogProps: {
|
|
250
|
+
bsSize: 'sm',
|
|
251
|
+
},
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
sendMessageToParent({
|
|
255
|
+
type: `${PREFIX}${OPEN_DIALOG_EVENT}`,
|
|
256
|
+
payload,
|
|
257
|
+
});
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
return (
|
|
261
|
+
<div className='bg-white border rounded padding-20 height-200'>
|
|
262
|
+
<div className='text-medium'>This is a widget embedded via an iframe</div>
|
|
263
|
+
<div className='btn-toolbar margin-top-20'>
|
|
264
|
+
<Button onClick={handleOpenDialog}>Open dialog in parent frame</Button>
|
|
265
|
+
</div>
|
|
266
|
+
<div className='margin-top-20'>
|
|
267
|
+
<label>Closing message from dialog:</label>
|
|
268
|
+
<div>{messageFromDialog}</div>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
);
|
|
272
|
+
};
|
|
273
|
+
|
|
274
|
+
export default WidgetDemo;
|
|
275
|
+
|
|
276
|
+
// ----------------------------------------------------------
|
|
277
|
+
import Button from '../../../../src/Button';
|
|
278
|
+
import Dialog from '../../../../src/Dialog';
|
|
279
|
+
import usePostMessage from '../../../../src/usePostMessage';
|
|
280
|
+
import { CLOSE_DIALOG_EVENT } from '../../../../src/FrameDialog';
|
|
281
|
+
|
|
282
|
+
import { dummyText } from '../../utils/data';
|
|
283
|
+
import { PREFIX } from './WidgetDemo';
|
|
284
|
+
|
|
285
|
+
const WidgetDemo = () => {
|
|
286
|
+
const { sendMessageToParent } = usePostMessage(PREFIX);
|
|
287
|
+
|
|
288
|
+
const handleCloseDialog = () => {
|
|
289
|
+
sendMessageToParent({
|
|
290
|
+
type: `${PREFIX}${CLOSE_DIALOG_EVENT}`,
|
|
291
|
+
payload: 'hello from the dialog view',
|
|
292
|
+
});
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
return (
|
|
296
|
+
<div className='bg-white min-height-200'>
|
|
297
|
+
<Dialog.Title title='Widget dialog' onCloseButtonClick={handleCloseDialog} />
|
|
298
|
+
|
|
299
|
+
<Dialog.Body className='padding-20'>
|
|
300
|
+
<div className='text-medium'>This is the widget dialog content embedded via an iframe</div>
|
|
301
|
+
<p>{dummyText}</p>
|
|
302
|
+
</Dialog.Body>
|
|
303
|
+
|
|
304
|
+
<Dialog.Footer>
|
|
305
|
+
<div>
|
|
306
|
+
<Button onClick={handleCloseDialog}>Close dialog in parent frame</Button>
|
|
307
|
+
</div>
|
|
308
|
+
</Dialog.Footer>
|
|
309
|
+
</div>
|
|
310
|
+
);
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
export default WidgetDemo;
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
#### HTML (html)
|
|
317
|
+
|
|
318
|
+
```html
|
|
319
|
+
<div class="iframe-wrapper">
|
|
320
|
+
<iframe title="iframe" id="widgetDialogFrame" src="https://uikit.developers.rio.cloud/#widgetDemo" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 200px;" scrolling="no">
|
|
321
|
+
</iframe>
|
|
322
|
+
</div>
|
|
323
|
+
```
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Obfuscate data
|
|
2
|
+
|
|
3
|
+
*Category:* Getting started
|
|
4
|
+
*Section:* Guidelines
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#start/guidelines/obfuscate-data
|
|
6
|
+
*Captured:* 2025-12-12T12:38:02.805Z
|
|
7
|
+
|
|
8
|
+
This demo demonstrates how sensitive data marked with the data-pii="visible" attribute can be obfuscated directly in the frontend.
|
|
9
|
+
|
|
10
|
+
## Obfuscate data
|
|
11
|
+
|
|
12
|
+
You can enable the feature either by using the keyboard shortcut Ctrl / CMD + Shift + U or by adding the data-hide-pii="shuffle" attribute to the <html> element.
|
|
13
|
+
|
|
14
|
+
Pressing the shortcut once will shuffle the data. Pressing it again will apply a text mask. If you want to enforce one variant on page load, you can add data-hide-pii="shuffle" or data-hide-pii="mask" to the <html> element. By pressing the shortcut a third time, the original value will be visible again.
|
|
15
|
+
|
|
16
|
+
Dynamically added elements will immediately be obfuscated as long as the HTML attribute is available.
|
|
17
|
+
|
|
18
|
+
**What happens in detail:**
|
|
19
|
+
|
|
20
|
+
- Names: Non-letter characters are removed, the token is padded to at least 6 characters, shuffled, and returned in title-case. Pure-digit or non-letter tokens remain unchanged.
|
|
21
|
+
- Emails: Punctuation is removed, each part is padded to 6 characters, shuffled and suffixed with .xx based on the browser locale.
|
|
22
|
+
- Phone numbers: International prefixes (after +) are preserved, the remaining digits are shuffled, and original separators (spaces, dashes, parentheses) are kept.
|
|
23
|
+
|
|
24
|
+
**This is useful for:**
|
|
25
|
+
|
|
26
|
+
- Debug or demo environments, where you want realistic data structure but no real identities.
|
|
27
|
+
- Screenshot or recording safety, ensuring you don’t leak PII in support sessions or analytics.
|
|
28
|
+
- QA/testing, to verify UI behavior without showing live customer data.
|
|
29
|
+
|
|
30
|
+
> Tip: Use the "Load more" button to dynamically reveal additional obfuscated employees.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# Print CSS
|
|
2
|
+
|
|
3
|
+
*Category:* Getting started
|
|
4
|
+
*Section:* Guidelines
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#start/guidelines/print-css
|
|
6
|
+
*Captured:* 2025-12-12T12:38:02.802Z
|
|
7
|
+
|
|
8
|
+
The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.
|
|
9
|
+
|
|
10
|
+
## Print CSS
|
|
11
|
+
|
|
12
|
+
## Utility classes
|
|
13
|
+
|
|
14
|
+
A lot of our utility classes are available for different breakpoints and are already marked with aRESPONSIVElabel.
|
|
15
|
+
|
|
16
|
+
Now those classes also are available forPRINT media queries.Example: display-inline-lsdisplay-block-print
|
|
17
|
+
|
|
18
|
+
Do not forget to include the needed print css file. See "How to" for more information.
|
|
19
|
+
|
|
20
|
+
## Print area
|
|
21
|
+
|
|
22
|
+
Activate the UIKIT print styles by adding printable-content to any wrapping container of ApplicationLayoutBody or
|
|
23
|
+
|
|
24
|
+
ApplicationLayoutSidebarin combination with the class print-area to one of them for having scoped printable content.
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<body class="printable-content">
|
|
28
|
+
<div class="ApplicationLayoutSidebar print-area"></div>
|
|
29
|
+
</body>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
We suggest to add the class temporarily (1 second) when clicking a button and then trigger window.print()
|
|
33
|
+
|
|
34
|
+
## Print content
|
|
35
|
+
|
|
36
|
+
By adding the class non-printable to any element, you can hide it while printing.
|