@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
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"metadata": {
|
|
3
|
-
"captured_at": "2025-11-21T12:07:38.474Z",
|
|
4
|
-
"source": "https://uikit.developers.rio.cloud/#components/labeledElement",
|
|
5
|
-
"category": "Components",
|
|
6
|
-
"section": "Content",
|
|
7
|
-
"slug": "components/labeledelement",
|
|
8
|
-
"version": "v1.13.2",
|
|
9
|
-
"hash_algorithm": "sha256",
|
|
10
|
-
"hash": "b30dcc570d7827376c0bacfcf8eb5460049393f108ce32e501756963e2a23af5"
|
|
11
|
-
},
|
|
12
|
-
"title": "LabeledElement",
|
|
13
|
-
"lead": "A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.",
|
|
14
|
-
"content": [
|
|
15
|
-
{
|
|
16
|
-
"heading": "LabeledElement",
|
|
17
|
-
"body": "",
|
|
18
|
-
"examples": [
|
|
19
|
-
{
|
|
20
|
-
"caption": "Label for other elements",
|
|
21
|
-
"rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25\"><div class=\"LabeledElement display-flex flex-column\"><label for=\"sample-input\" class=\"display-inline-block\"><span>Label for a form element</span></label><input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\"></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for other elements</div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for a value</div><div>Some value with default gap</div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Label with no gap</div>Lorem ipsum dolor</div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\"><span>Label for styled value</span></div><span class=\"text-size-16 text-color-darker\">Lorem ipsum dolor</span></div></div></div>",
|
|
22
|
-
"tabs": [
|
|
23
|
-
{
|
|
24
|
-
"label": "React",
|
|
25
|
-
"language": "tsx",
|
|
26
|
-
"code": "import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\n\nexport default () => (\n <div className='display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25'>\n <LabeledElement label='Label for a form element' htmlFor='sample-input'>\n <input id='sample-input' className='form-control' placeholder='Some random input' />\n </LabeledElement>\n\n <LabeledElement label='Label for other elements'>\n <ButtonToolbar>\n <Button>Button</Button>\n <Button bsStyle='primary'>Button</Button>\n </ButtonToolbar>\n </LabeledElement>\n\n <LabeledElement label='Label for a value'>\n <div>Some value with default gap</div>\n </LabeledElement>\n\n <LabeledElement label='Label with no gap' noGap>\n Lorem ipsum dolor\n </LabeledElement>\n\n <LabeledElement label={<span>Label for styled value</span>} noGap>\n <span className='text-size-16 text-color-darker'>Lorem ipsum dolor</span>\n </LabeledElement>\n </div>\n);"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"label": "HTML",
|
|
30
|
-
"language": "html",
|
|
31
|
-
"code": "<div class=\"display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25\">\n <div class=\"LabeledElement display-flex flex-column\">\n <label for=\"sample-input\" class=\"display-inline-block\">\n <span>Label for a form element</span>\n </label>\n <input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\">\n </div>\n <div class=\"LabeledElement display-flex flex-column\">\n <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for other elements</div>\n <div class=\"btn-toolbar\">\n <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button>\n <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button>\n </div>\n </div>\n <div class=\"LabeledElement display-flex flex-column\">\n <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for a value</div>\n <div>Some value with default gap</div>\n </div>\n <div class=\"LabeledElement display-flex flex-column\">\n <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Label with no gap</div>Lorem ipsum dolor\n </div>\n <div class=\"LabeledElement display-flex flex-column\">\n <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">\n <span>Label for styled value</span>\n </div>\n <span class=\"text-size-16 text-color-darker\">Lorem ipsum dolor</span>\n </div>\n</div>"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"label": "Props",
|
|
35
|
-
"language": "json",
|
|
36
|
-
"code": null,
|
|
37
|
-
"props": [
|
|
38
|
-
{
|
|
39
|
-
"heading": null,
|
|
40
|
-
"rows": [
|
|
41
|
-
{
|
|
42
|
-
"name": "label",
|
|
43
|
-
"type": "string | React.ReactElement",
|
|
44
|
-
"default": "",
|
|
45
|
-
"description": "The text to display for the label."
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"name": "labelProps",
|
|
49
|
-
"type": "FormLabelProps",
|
|
50
|
-
"default": "",
|
|
51
|
-
"description": "Additional props for the FormLabel, excluding children and htmlFor."
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"name": "noGap",
|
|
55
|
-
"type": "boolean",
|
|
56
|
-
"default": "false",
|
|
57
|
-
"description": "If true, removes the bottom margin from the label."
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"name": "className",
|
|
61
|
-
"type": "String",
|
|
62
|
-
"default": "",
|
|
63
|
-
"description": "Additional classes to be set on the wrapper element."
|
|
64
|
-
}
|
|
65
|
-
]
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
}
|
|
69
|
-
]
|
|
70
|
-
}
|
|
71
|
-
]
|
|
72
|
-
}
|
|
73
|
-
],
|
|
74
|
-
"see_also": []
|
|
75
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"metadata": {
|
|
3
|
-
"captured_at": "2025-11-21T12:07:51.607Z",
|
|
4
|
-
"source": "https://uikit.developers.rio.cloud/#components/licensePlate",
|
|
5
|
-
"category": "Components",
|
|
6
|
-
"section": "Misc",
|
|
7
|
-
"slug": "components/licenseplate",
|
|
8
|
-
"version": "v1.13.2",
|
|
9
|
-
"hash_algorithm": "sha256",
|
|
10
|
-
"hash": "43153bd64ae74299e348ee06a55c6875c6271913718f4f3f4b29ee0552616e03"
|
|
11
|
-
},
|
|
12
|
-
"title": "LicensePlate",
|
|
13
|
-
"lead": "The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.",
|
|
14
|
-
"content": [
|
|
15
|
-
{
|
|
16
|
-
"heading": "LicensePlate",
|
|
17
|
-
"body": "",
|
|
18
|
-
"examples": [
|
|
19
|
-
{
|
|
20
|
-
"caption": "Example 1",
|
|
21
|
-
"rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid gap-25\"><div class=\"margin-bottom-0\"><div class=\"description-headline\"><h2 class=\"\">Test with your own data</h2></div><div class=\"max-width-1000\"><p class=\"margin-bottom-0\">Enter demo data for <code>countryCode</code> and <code>LicensePlate</code></p></div></div><div class=\"display-flex gap-10\"><div class=\"width-60\"><input type=\"text\" class=\"form-control text-center\" maxlength=\"3\" value=\"\"></div><div class=\"max-width-200\"><input type=\"text\" class=\"form-control\" maxlength=\"10\" value=\"\"></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div></div></div>",
|
|
22
|
-
"tabs": [
|
|
23
|
-
{
|
|
24
|
-
"label": "React",
|
|
25
|
-
"language": "tsx",
|
|
26
|
-
"code": "import React, { useState } from 'react';\n\nimport { Divider } from '@rio-cloud/rio-uikit';\nimport LicensePlate from '@rio-cloud/rio-uikit/LicensePlate';\nimport { Description } from '../../../components/Description';\n\nexport default () => {\n const [inputValue, setInputValue] = useState('');\n const [countryCode, setCountryCode] = useState('');\n\n const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n setInputValue(event.target.value);\n };\n\n const handleCountryCodeChange = (event: { target: { value: string } }) => {\n setCountryCode(event.target.value.toUpperCase());\n };\n\n return (\n <div className='display-grid gap-25'>\n <Description headline='Test with your own data' className='margin-bottom-0'>\n <p className='margin-bottom-0'>\n Enter demo data for <code>countryCode</code> and <code>LicensePlate</code>\n </p>\n </Description>\n <div className='display-flex gap-10'>\n <div className='width-60'>\n <input\n type='text'\n value={countryCode}\n onChange={handleCountryCodeChange}\n className='form-control text-center'\n maxLength={3}\n />\n </div>\n <div className='max-width-200'>\n <input\n type='text'\n value={inputValue}\n onChange={handleInputChange}\n className='form-control'\n maxLength={10}\n />\n </div>\n </div>\n\n <Divider />\n\n <LicensePlate className='max-width-300' countryCode={countryCode || 'D'}>\n {inputValue || 'M-TB-1234'}\n </LicensePlate>\n <LicensePlate className='max-width-300' countryCode={countryCode || 'DK'}>\n {inputValue || 'AF 12 3456'}\n </LicensePlate>\n <LicensePlate className='max-width-300' countryCode={countryCode || 'SLO'}>\n {inputValue || 'LJ 12-ABC'}\n </LicensePlate>\n\n <Divider />\n\n <LicensePlate className='max-width-200' countryCode={countryCode || 'D'}>\n {inputValue || 'M-TB-1234'}\n </LicensePlate>\n <LicensePlate className='max-width-200' countryCode={countryCode || 'DK'}>\n {inputValue || 'AF 12 3456'}\n </LicensePlate>\n <LicensePlate className='max-width-200' countryCode={countryCode || 'SLO'}>\n {inputValue || 'LJ 12-ABC'}\n </LicensePlate>\n\n <Divider />\n\n <LicensePlate className='max-width-150' countryCode={countryCode || 'D'}>\n {inputValue || 'M-TB-1234'}\n </LicensePlate>\n <LicensePlate className='max-width-150' countryCode={countryCode || 'DK'}>\n {inputValue || 'AF 12 3456'}\n </LicensePlate>\n <LicensePlate className='max-width-150' countryCode={countryCode || 'SLO'}>\n {inputValue || 'LJ 12-ABC'}\n </LicensePlate>\n\n <Divider />\n\n <LicensePlate className='max-width-100' countryCode={countryCode || 'D'}>\n {inputValue || 'M-TB-1234'}\n </LicensePlate>\n <LicensePlate className='max-width-100' countryCode={countryCode || 'DK'}>\n {inputValue || 'AF 12 3456'}\n </LicensePlate>\n <LicensePlate className='max-width-100' countryCode={countryCode || 'SLO'}>\n {inputValue || 'LJ 12-ABC'}\n </LicensePlate>\n </div>\n );\n};"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"label": "HTML",
|
|
30
|
-
"language": "html",
|
|
31
|
-
"code": "<div class=\"display-grid gap-25\">\n <div class=\"margin-bottom-0\">\n <div class=\"description-headline\">\n <h2 class=\"\">Test with your own data</h2>\n </div>\n <div class=\"max-width-1000\">\n <p class=\"margin-bottom-0\">Enter demo data for <code>countryCode</code> and <code>LicensePlate</code>\n </p>\n </div>\n </div>\n <div class=\"display-flex gap-10\">\n <div class=\"width-60\">\n <input type=\"text\" class=\"form-control text-center\" maxlength=\"3\" value=\"\">\n </div>\n <div class=\"max-width-200\">\n <input type=\"text\" class=\"form-control\" maxlength=\"10\" value=\"\">\n </div>\n </div>\n <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n </div>\n </div>\n <div class=\"license-plate max-width-300\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code \">D</span>\n </div>\n <div class=\"plate-number\">M-TB-1234</div>\n </div>\n </div>\n <div class=\"license-plate max-width-300\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code two-letters\">DK</span>\n </div>\n <div class=\"plate-number\">AF 12 3456</div>\n </div>\n </div>\n <div class=\"license-plate max-width-300\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code three-letters\">SLO</span>\n </div>\n <div class=\"plate-number\">LJ 12-ABC</div>\n </div>\n </div>\n <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n </div>\n </div>\n <div class=\"license-plate max-width-200\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code \">D</span>\n </div>\n <div class=\"plate-number\">M-TB-1234</div>\n </div>\n </div>\n <div class=\"license-plate max-width-200\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code two-letters\">DK</span>\n </div>\n <div class=\"plate-number\">AF 12 3456</div>\n </div>\n </div>\n <div class=\"license-plate max-width-200\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code three-letters\">SLO</span>\n </div>\n <div class=\"plate-number\">LJ 12-ABC</div>\n </div>\n </div>\n <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n </div>\n </div>\n <div class=\"license-plate max-width-150\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code \">D</span>\n </div>\n <div class=\"plate-number\">M-TB-1234</div>\n </div>\n </div>\n <div class=\"license-plate max-width-150\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code two-letters\">DK</span>\n </div>\n <div class=\"plate-number\">AF 12 3456</div>\n </div>\n </div>\n <div class=\"license-plate max-width-150\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code three-letters\">SLO</span>\n </div>\n <div class=\"plate-number\">LJ 12-ABC</div>\n </div>\n </div>\n <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n </div>\n </div>\n <div class=\"license-plate max-width-100\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code \">D</span>\n </div>\n <div class=\"plate-number\">M-TB-1234</div>\n </div>\n </div>\n <div class=\"license-plate max-width-100\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code two-letters\">DK</span>\n </div>\n <div class=\"plate-number\">AF 12 3456</div>\n </div>\n </div>\n <div class=\"license-plate max-width-100\">\n <div class=\"plate-content\">\n <div class=\"plate-country\">\n <span class=\"stars\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n </path>\n </svg>\n </span>\n <span class=\"plate-country-code three-letters\">SLO</span>\n </div>\n <div class=\"plate-number\">LJ 12-ABC</div>\n </div>\n </div>\n</div>"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"label": "Props",
|
|
35
|
-
"language": "json",
|
|
36
|
-
"code": null,
|
|
37
|
-
"props": [
|
|
38
|
-
{
|
|
39
|
-
"heading": null,
|
|
40
|
-
"rows": [
|
|
41
|
-
{
|
|
42
|
-
"name": "countryCode",
|
|
43
|
-
"type": "string",
|
|
44
|
-
"default": "",
|
|
45
|
-
"description": "The country code. Should be a string with 1-3 capital letters."
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"name": "hideStars",
|
|
49
|
-
"type": "boolean",
|
|
50
|
-
"default": "false",
|
|
51
|
-
"description": "Whether the EU stars should be hidden."
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"name": "className",
|
|
55
|
-
"type": "string",
|
|
56
|
-
"default": "",
|
|
57
|
-
"description": "Additional classes added to the wrapping element."
|
|
58
|
-
}
|
|
59
|
-
]
|
|
60
|
-
}
|
|
61
|
-
]
|
|
62
|
-
}
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
]
|
|
66
|
-
}
|
|
67
|
-
],
|
|
68
|
-
"see_also": []
|
|
69
|
-
}
|