@rio-cloud/uikit-mcp 1.1.9 → 1.1.11
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 +2 -1
- package/dist/doc-metadata.json +334 -94
- package/dist/docs/components/accentBar.md +110 -116
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/analyticsAnalysisOverlay.md +630 -0
- package/dist/docs/components/animatedNumber.md +2 -2
- package/dist/docs/components/animatedTextReveal.md +53 -55
- package/dist/docs/components/animations.md +21 -21
- package/dist/docs/components/appHeader.md +27 -38
- package/dist/docs/components/appLayout.md +23 -77
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +57 -61
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +429 -342
- package/dist/docs/components/autosuggests.md +1 -1
- package/dist/docs/components/avatar.md +1 -1
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +530 -414
- package/dist/docs/components/barList.md +10 -10
- package/dist/docs/components/basicMap.md +104 -39
- package/dist/docs/components/bottomSheet.md +2 -2
- package/dist/docs/components/button.md +8 -2
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +59 -63
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +1 -1
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -2
- package/dist/docs/components/checkbox.md +15 -10
- package/dist/docs/components/circularProgress.md +6 -6
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +2 -2
- package/dist/docs/components/composedCharts.md +63 -51
- package/dist/docs/components/contentLoader.md +1 -1
- package/dist/docs/components/dataTabs.md +33 -33
- package/dist/docs/components/datepickers.md +693 -685
- package/dist/docs/components/dayPicker.md +5624 -0
- package/dist/docs/components/dayPickerCalendar.md +5289 -0
- package/dist/docs/components/dialogs.md +17 -19
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +3264 -3276
- package/dist/docs/components/editableContent.md +91 -91
- package/dist/docs/components/expander.md +4 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +32 -36
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +29 -31
- package/dist/docs/components/groupedItemList.md +3 -7
- package/dist/docs/components/htmlTable.md +5074 -0
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +1 -1
- package/dist/docs/components/labeledElement.md +1 -1
- package/dist/docs/components/licensePlate.md +1 -1
- package/dist/docs/components/lineCharts.md +172 -170
- package/dist/docs/components/listMenu.md +15 -12
- package/dist/docs/components/loadMore.md +4 -2
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +10 -1
- package/dist/docs/components/mapCluster.md +25 -1
- package/dist/docs/components/mapContext.md +12 -4
- package/dist/docs/components/mapDraggableMarker.md +12 -1
- package/dist/docs/components/mapGettingStarted.md +39 -1
- package/dist/docs/components/mapInfoBubble.md +129 -2
- package/dist/docs/components/mapLayerGroup.md +10 -1
- package/dist/docs/components/mapMarker.md +10 -1
- package/dist/docs/components/mapPolygon.md +288 -85
- package/dist/docs/components/mapRoute.md +262 -172
- package/dist/docs/components/mapSettings.md +28 -1
- package/dist/docs/components/mapUtils.md +1 -1
- package/dist/docs/components/mapViewportHistory.md +287 -0
- package/dist/docs/components/multiselects.md +217 -18
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +2 -2
- package/dist/docs/components/numbercontrol.md +15 -15
- package/dist/docs/components/onboarding.md +1 -1
- package/dist/docs/components/page.md +1 -1
- package/dist/docs/components/pager.md +1 -1
- package/dist/docs/components/pieCharts.md +237 -211
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +446 -398
- package/dist/docs/components/radioCardGroup.md +1 -1
- package/dist/docs/components/radiobutton.md +98 -98
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +1 -1
- package/dist/docs/components/responsiveColumnStripe.md +1 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +41 -47
- package/dist/docs/components/saveableInput.md +252 -252
- package/dist/docs/components/selects.md +332 -161
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +19 -13
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +15 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +3 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +9 -11
- package/dist/docs/components/subNavigation.md +1 -1
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +1 -1
- package/dist/docs/components/switch.md +5 -1
- package/dist/docs/components/table.md +21361 -0
- package/dist/docs/components/tableControls.md +982 -0
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +1 -1
- package/dist/docs/components/textTruncateMiddle.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +3 -1
- package/dist/docs/components/toggleButton.md +3 -1
- package/dist/docs/components/tooltip.md +8 -2
- package/dist/docs/components/tracker.md +1 -1
- package/dist/docs/components/virtualList.md +60 -60
- package/dist/docs/foundations.md +761 -3077
- package/dist/docs/start/changelog.md +73 -3
- package/dist/docs/start/goodtoknow.md +5 -1
- package/dist/docs/start/guidelines/color-combinations.md +5 -1
- package/dist/docs/start/guidelines/custom-css.md +26 -2
- package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
- package/dist/docs/start/guidelines/formatting.md +2254 -249
- package/dist/docs/start/guidelines/iframe.md +53 -19
- package/dist/docs/start/guidelines/obfuscate-data.md +24 -2
- package/dist/docs/start/guidelines/print-css.md +16 -2
- package/dist/docs/start/guidelines/spinner.md +1 -1
- package/dist/docs/start/guidelines/state-in-url.md +1138 -11
- package/dist/docs/start/guidelines/supported-browsers.md +9 -2
- package/dist/docs/start/guidelines/writing.md +228 -2
- package/dist/docs/start/howto.md +155 -13
- package/dist/docs/start/intro.md +40 -2
- package/dist/docs/start/responsiveness.md +27 -1
- package/dist/docs/templates/ai-assistant.md +311 -0
- package/dist/docs/templates/common-table.md +814 -0
- package/dist/docs/templates/detail-views.md +846 -0
- package/dist/docs/templates/expandable-details.md +214 -0
- package/dist/docs/templates/feature-cards.md +479 -0
- package/dist/docs/templates/form-summary.md +179 -0
- package/dist/docs/templates/form-toggle.md +329 -0
- package/dist/docs/templates/list-blocks.md +872 -0
- package/dist/docs/templates/loading-progress.md +100 -0
- package/dist/docs/templates/options-panel.md +132 -0
- package/dist/docs/templates/panel-variants.md +137 -0
- package/dist/docs/templates/progress-cards.md +541 -0
- package/dist/docs/templates/progress-success.md +125 -0
- package/dist/docs/templates/settings-form.md +401 -0
- package/dist/docs/templates/stats-blocks.md +1245 -0
- package/dist/docs/templates/table-panel.md +310 -0
- package/dist/docs/templates/usage-cards.md +199 -0
- package/dist/docs/utilities/classNames.md +89 -1
- package/dist/docs/utilities/deviceUtils.md +2 -2
- package/dist/docs/utilities/featureToggles.md +182 -2
- package/dist/docs/utilities/fuelTypeUtils.md +27 -29
- package/dist/docs/utilities/getTrackingAttributes.md +322 -0
- package/dist/docs/utilities/routeUtils.md +211 -3
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCookies.md +1 -1
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +5 -4
- package/dist/docs/utilities/useDebugInfo.md +3 -3
- package/dist/docs/utilities/useDraggableElement.md +281 -0
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +8 -10
- package/dist/docs/utilities/useLocalStorage.md +1 -1
- package/dist/docs/utilities/useLocationSuggestions.md +1 -1
- package/dist/docs/utilities/useMax.md +1 -1
- package/dist/docs/utilities/useMin.md +1 -1
- package/dist/docs/utilities/useMutationObserver.md +1 -1
- package/dist/docs/utilities/useOnScreen.md +1 -1
- package/dist/docs/utilities/useOnlineStatus.md +1 -1
- package/dist/docs/utilities/usePostMessage.md +2 -2
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +110 -2
- package/dist/docs/utilities/useResizeObserver.md +35 -15
- package/dist/docs/utilities/useRioCookieConsent.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +3 -6
- package/dist/docs/utilities/useSearch.md +1 -3
- package/dist/docs/utilities/useSearchHighlight.md +1 -1
- package/dist/docs/utilities/useSorting.md +370 -239
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +364 -288
- package/dist/docs/utilities/useTableSelection.md +88 -92
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useUrlState.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +173 -69
- package/dist/search-synonyms.json +214 -76
- package/dist/version.json +2 -2
- package/package.json +4 -5
- package/dist/docs/components/mapRouteGenerator.md +0 -6
- package/dist/docs/components/tables.md +0 -8
|
@@ -3,9 +3,79 @@
|
|
|
3
3
|
*Category:* Getting started
|
|
4
4
|
*Section:* Welcome
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/start/changelog
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:04.818Z
|
|
7
7
|
|
|
8
|
-
## Version 2.
|
|
8
|
+
## Version 2.4.0 (2026-04-27)
|
|
9
|
+
|
|
10
|
+
- **Update** Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.
|
|
11
|
+
|
|
12
|
+
- **Fixed** Forms Fixed sized inputs with form-control so they use the correct font size again.
|
|
13
|
+
|
|
14
|
+
- **New** Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.
|
|
15
|
+
|
|
16
|
+
- **Fixed** Map settings Fixed map settings dropdowns so they are displayed properly when opened.
|
|
17
|
+
|
|
18
|
+
- **New** Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.
|
|
19
|
+
|
|
20
|
+
- **Update** Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.
|
|
21
|
+
|
|
22
|
+
- **Update** Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.
|
|
23
|
+
|
|
24
|
+
- **Fixed** Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.
|
|
25
|
+
|
|
26
|
+
- **Fixed** Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.
|
|
27
|
+
|
|
28
|
+
## Version 2.3.0 (2026-03-20)
|
|
29
|
+
|
|
30
|
+
- **New** useDraggableElement Added a new useDraggableElement hook to make DOM elements draggable with pointer events, including support for dedicated drag handles.
|
|
31
|
+
|
|
32
|
+
- **New** CSS Animations Added a new foundations demo page for CSS animations with interactive slide, fade, scale, and rotate examples, including controls for duration, delay, easing, repeat, looping, and playback.
|
|
33
|
+
|
|
34
|
+
- **New** AI Assistant template Added a new template demo for AI-assisted service queries that turns a request into a structured response card with loading states and result tables.
|
|
35
|
+
|
|
36
|
+
- **Update** Multiselect Added a new useClear prop to clear the current selection from the toggle, aligned with the existing Select API and documented in the multiselect demo page.
|
|
37
|
+
|
|
38
|
+
- **Update** ButtonDropdown Added a new iconName prop and forward it to the underlying button toggle, so icon buttons no longer need custom title markup just to render a rioglyph with a button text.
|
|
39
|
+
|
|
40
|
+
- **Update** Route Route interactions now show a pointer cursor for clickable routes and support an optional hoverStyle. Route clicks and hover now use an internal hit area to enlarge the clickable surface and make route interaction more reliable.
|
|
41
|
+
|
|
42
|
+
- **Update** Polygon & Isoline Polygons and isolines now support click and hover interactions, including automatic pointer cursors for clickable shapes and an optional hoverStyle for hover feedback such as highlighted outlines.
|
|
43
|
+
|
|
44
|
+
- **Update** Map performance Added marker icon caching for map markers and cluster markers, which avoids recreating identical marker icons, speeds up large marker sets, and can reduce memory usage by reusing shared DOM icon instances. Also added an optional zoom optimization to temporarily suppress marker pointer events during zoom interactions.
|
|
45
|
+
|
|
46
|
+
- **Fixed** useResizeObserver Fixed repeated state updates when ResizeObserver reported the same size, which could trigger render loops under certain conditions.
|
|
47
|
+
|
|
48
|
+
- **Fixed** routeUtils Fixed parseSorting to return the documented asc / desc sort direction values, so URL-based table sorting no longer resets after parsing in controlled integrations.
|
|
49
|
+
|
|
50
|
+
- **Fixed** Fixed incorrect:focus-visible outlines on text links in Chrome 147 after the browser changed how outline-width and outline-style are computed.
|
|
51
|
+
|
|
52
|
+
- **Fixed** InfoBubble Adjusted the HERE map InfoBubble to use the active theme font-family instead of HERE default font styles. Also added a new demo showing an InfoBubble opened from a POI map marker.
|
|
53
|
+
|
|
54
|
+
- **New** DayPicker Added a new composable DayPicker component for date inputs with dropdown calendar, custom triggers, sidebars, footers, presets, validation, and composed date/time workflows.
|
|
55
|
+
|
|
56
|
+
- **New** DayPickerCalendar Added a new standalone DayPickerCalendar component for embedded calendar use cases, including single, multiple, and range selection plus custom modifiers and day content.
|
|
57
|
+
|
|
58
|
+
- **New** Table Added a new declarative Table component with compound subcomponents for headers, rows, cells, footers, grouped sticky rows, expandable rows, selection, sortable and resizable columns, column filters, disabled rows, row animations, and responsive card views.
|
|
59
|
+
|
|
60
|
+
- **New** TableToolbar Added the new compound TableToolbarColumn API for declarative toolbar layouts with automatic left/right grouping via alignment, optional label and separator, plus per-column className support. Existing manual toolbar markup remains supported.
|
|
61
|
+
|
|
62
|
+
- **Update** TableViewToggles Redesigned TableViewToggles to use a Select-based view switcher instead of the former toggle button group. Added dedicated label props for the dropdown items, while the older tooltip props are now deprecated and only kept as a fallback for item labels.
|
|
63
|
+
|
|
64
|
+
- **Update** LoadMoreButton Added the new hideOnPrint prop, defaulting to true.
|
|
65
|
+
|
|
66
|
+
- **New** AnalyticsAnalysisOverlay Added a new AnalyticsAnalysisOverlay component to visualize tracked elements on the page using uploaded analytics CSV data.
|
|
67
|
+
|
|
68
|
+
- **New** googleAnalyticsUtils Added a new Utilities helper demo page for googleAnalyticsUtils with examples for getTrackingAttributes.
|
|
69
|
+
|
|
70
|
+
- **Update** Button Added support for automatic GA tracking attributes via the new autoTrackingKey prop.
|
|
71
|
+
|
|
72
|
+
- **Update** ExpanderPanel Added support for tracking attributes on panel headers, so getTrackingAttributes will be passed directly to ExpanderPanel.
|
|
73
|
+
|
|
74
|
+
- **Update** ExpanderList Added support for tracking attributes on expander item, so getTrackingAttributes will be passed directly to ExpanderListItemHeader.
|
|
75
|
+
|
|
76
|
+
- **New** New icons rioglyph- big-bag rioglyph- bulk-container rioglyph- coil rioglyph- roll-container rioglyph- shelve-empty rioglyph- stillage
|
|
77
|
+
|
|
78
|
+
## Version 2.2.1 (2026-03-06)
|
|
9
79
|
|
|
10
80
|
- **Fixed** TableSettingsDialog Fixed the TableSettingsDialog to prevent an endless loop under certain conditions.
|
|
11
81
|
|
|
@@ -663,7 +733,7 @@
|
|
|
663
733
|
|
|
664
734
|
- **breaking** Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.
|
|
665
735
|
|
|
666
|
-
- **Removed** useResizeObserver The "Observer Entry" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults
|
|
736
|
+
- **Removed** useResizeObserver The "Observer Entry" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults to div).
|
|
667
737
|
|
|
668
738
|
- **Fixed** Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.
|
|
669
739
|
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
*Category:* Getting started
|
|
4
4
|
*Section:* Guidelines
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/start/goodtoknow
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:04.341Z
|
|
7
7
|
|
|
8
8
|
## Good to know
|
|
9
9
|
|
|
10
10
|
## IntelliSense for CSS class names in HTML
|
|
11
11
|
|
|
12
|
+
A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element. Download here.
|
|
13
|
+
|
|
12
14
|
## CSS Hyphens
|
|
13
15
|
|
|
16
|
+
The Hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present. For more details see css-tricks.com.
|
|
17
|
+
|
|
14
18
|
> Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
*Category:* Getting started
|
|
4
4
|
*Section:* Guidelines
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/color-combinations
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:05.130Z
|
|
7
7
|
|
|
8
8
|
For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.
|
|
9
9
|
|
|
10
10
|
## Color combinations
|
|
11
11
|
|
|
12
|
+
Dos and Don‘tsGoodBad
|
|
13
|
+
|
|
14
|
+
TextIconsLabels
|
|
15
|
+
|
|
12
16
|
### Example: Example 1
|
|
13
17
|
|
|
14
18
|
White text on brand backgrounds
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Getting started
|
|
4
4
|
*Section:* Guidelines
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-css
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:05.092Z
|
|
7
7
|
|
|
8
8
|
Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.
|
|
9
9
|
|
|
@@ -13,6 +13,8 @@ Getting more familiar with Bootstrap and the UIKIT will speed up your developmen
|
|
|
13
13
|
|
|
14
14
|
Therefore, avoid writing custom CSS where possible and try to achieve the desired results by using
|
|
15
15
|
|
|
16
|
+
HTML designUIKIT componentsUIKIT foundation utility classes.
|
|
17
|
+
|
|
16
18
|
## Custom CSS
|
|
17
19
|
|
|
18
20
|
If the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.
|
|
@@ -33,10 +35,32 @@ You just have to add those css vars to the index.html head and than you can use
|
|
|
33
35
|
</head>
|
|
34
36
|
```
|
|
35
37
|
|
|
38
|
+
<head>
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
|
|
42
|
+
:root { --custom-color-a: #5eff1e; --custom-color-b: #e51eff; --custom-color-c: #1e90ff; --custom-color-d: #ff4b1e; --custom-color-e: #ffcb1e; }
|
|
43
|
+
|
|
44
|
+
</style>
|
|
45
|
+
|
|
46
|
+
</head>
|
|
47
|
+
|
|
36
48
|
```html
|
|
37
49
|
<div class="bg-custom-a">
|
|
38
50
|
<p class="text-color-custom-b">
|
|
39
51
|
<svg class="fill-custom-c"></svg>
|
|
40
52
|
</p>
|
|
41
53
|
</div>
|
|
42
|
-
```
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
<div class="bg-custom-a">
|
|
57
|
+
|
|
58
|
+
<p class="text-color-custom-b">
|
|
59
|
+
|
|
60
|
+
<svg class="fill-custom-c">
|
|
61
|
+
|
|
62
|
+
</svg>
|
|
63
|
+
|
|
64
|
+
</p>
|
|
65
|
+
|
|
66
|
+
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Getting started
|
|
4
4
|
*Section:* Guidelines
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-rioglyph
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:05.110Z
|
|
7
7
|
|
|
8
8
|
To use a custom Rioglyph icon, there are two different approaches:
|
|
9
9
|
|
|
@@ -16,12 +16,20 @@ Below is an example of both approaches:
|
|
|
16
16
|
|
|
17
17
|
**Approach 1: Inline style**
|
|
18
18
|
|
|
19
|
+
Without custom CSS
|
|
20
|
+
|
|
19
21
|
```html
|
|
20
22
|
<span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);"></span>
|
|
21
23
|
```
|
|
22
24
|
|
|
25
|
+
<span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
|
|
26
|
+
|
|
27
|
+
</span>
|
|
28
|
+
|
|
23
29
|
**Approach 2: Custom CSS class**
|
|
24
30
|
|
|
31
|
+
Use in components (eg. MapMarker)
|
|
32
|
+
|
|
25
33
|
```html
|
|
26
34
|
<style>
|
|
27
35
|
.rioglyph-custom-xxx {
|
|
@@ -30,6 +38,16 @@ Below is an example of both approaches:
|
|
|
30
38
|
</style>
|
|
31
39
|
```
|
|
32
40
|
|
|
41
|
+
<style>
|
|
42
|
+
|
|
43
|
+
.rioglyph-custom-xxx { --i: url('https://cdn.rio.cloud/images/uikit/react_logo.svg'); }
|
|
44
|
+
|
|
45
|
+
</style>
|
|
46
|
+
|
|
33
47
|
```html
|
|
34
48
|
<span class="rioglyph rioglyph-custom"></span>
|
|
35
|
-
```
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
<span class="rioglyph rioglyph-custom">
|
|
52
|
+
|
|
53
|
+
</span>
|