@rio-cloud/uikit-mcp 1.1.1 → 1.1.3
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/dist/doc-metadata.json +40 -50
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/animatedNumber.md +3 -3
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +31 -31
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +143 -34
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +6 -6
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +282 -176
- 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 +70 -70
- package/dist/docs/components/barList.md +11 -11
- package/dist/docs/components/basicMap.md +7 -7
- package/dist/docs/components/bottomSheet.md +1 -1
- package/dist/docs/components/button.md +1 -1
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +107 -131
- 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 +1 -1
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +2 -2
- package/dist/docs/components/composedCharts.md +48 -48
- package/dist/docs/components/contentLoader.md +101 -101
- package/dist/docs/components/dataTabs.md +8 -8
- package/dist/docs/components/datepickers.md +724 -724
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +4359 -4356
- package/dist/docs/components/editableContent.md +1 -1
- package/dist/docs/components/expander.md +1 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +2 -2
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- 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 +3 -3
- package/dist/docs/components/listMenu.md +1 -1
- package/dist/docs/components/loadMore.md +1 -1
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +3 -3
- package/dist/docs/components/mapCluster.md +5 -5
- package/dist/docs/components/mapContext.md +3 -3
- package/dist/docs/components/mapDraggableMarker.md +3 -3
- package/dist/docs/components/mapGettingStarted.md +1 -1
- package/dist/docs/components/mapInfoBubble.md +3 -3
- package/dist/docs/components/mapLayerGroup.md +3 -3
- package/dist/docs/components/mapMarker.md +3 -3
- package/dist/docs/components/mapPolygon.md +5 -5
- package/dist/docs/components/mapRoute.md +13 -13
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -11
- package/dist/docs/components/mapUtils.md +1 -1
- package/dist/docs/components/multiselects.md +1 -1
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +1 -1
- 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 +36 -36
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +25 -25
- package/dist/docs/components/radiobutton.md +1 -1
- 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 +1 -1
- package/dist/docs/components/saveableInput.md +277 -277
- package/dist/docs/components/selects.md +1 -1
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +1 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +1 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +1 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +1 -1
- 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 +1 -1
- package/dist/docs/components/tables.md +1 -1
- 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/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +1 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +1 -1
- package/dist/docs/components/virtualList.md +72 -72
- package/dist/docs/foundations.md +169 -169
- package/dist/docs/start/changelog.md +7 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +1 -1
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +1 -1
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +81 -81
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +9 -9
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/templates/common-table.md +11 -11
- package/dist/docs/templates/detail-views.md +2 -2
- package/dist/docs/templates/expandable-details.md +1 -1
- package/dist/docs/templates/feature-cards.md +55 -55
- package/dist/docs/templates/form-summary.md +22 -22
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +200 -200
- package/dist/docs/templates/loading-progress.md +1 -1
- package/dist/docs/templates/options-panel.md +1 -1
- package/dist/docs/templates/panel-variants.md +1 -1
- package/dist/docs/templates/progress-cards.md +1 -1
- package/dist/docs/templates/progress-success.md +1 -1
- package/dist/docs/templates/settings-form.md +23 -23
- package/dist/docs/templates/stats-blocks.md +16 -16
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/table-row-animation.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/routeUtils.md +1 -1
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +4 -4
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +1 -1
- 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 +1 -57
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +1 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSorting.md +1 -1
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +51 -51
- package/dist/docs/utilities/useTableSelection.md +87 -87
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +8 -2
- package/dist/version.json +2 -2
- package/package.json +8 -8
- package/dist/docs/components/fullscreenMap.md +0 -10
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/calendarStripe
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:51.321Z
|
|
7
7
|
|
|
8
8
|
A headless component where you provide a function that renders the UI for every day to be displayed.
|
|
9
9
|
|
|
@@ -11,31 +11,31 @@ A headless component where you provide a function that renders the UI for every
|
|
|
11
11
|
|
|
12
12
|
### Example: Example 1
|
|
13
13
|
|
|
14
|
+
Thursday
|
|
15
|
+
8 January 2026
|
|
16
|
+
|
|
17
|
+
Friday
|
|
18
|
+
9 January 2026
|
|
19
|
+
|
|
14
20
|
Saturday
|
|
15
|
-
|
|
21
|
+
10 January 2026
|
|
16
22
|
|
|
17
23
|
Sunday
|
|
18
|
-
|
|
24
|
+
11 January 2026
|
|
19
25
|
|
|
20
|
-
|
|
21
|
-
15 December 2025
|
|
26
|
+
#### Summary
|
|
22
27
|
|
|
23
|
-
|
|
24
|
-
|
|
28
|
+
Thursday
|
|
29
|
+
8 January 2026
|
|
25
30
|
|
|
26
|
-
|
|
31
|
+
Friday
|
|
32
|
+
9 January 2026
|
|
27
33
|
|
|
28
34
|
Saturday
|
|
29
|
-
|
|
35
|
+
10 January 2026
|
|
30
36
|
|
|
31
37
|
Sunday
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Monday
|
|
35
|
-
15 December 2025
|
|
36
|
-
|
|
37
|
-
Tuesday
|
|
38
|
-
16 December 2025
|
|
38
|
+
11 January 2026
|
|
39
39
|
|
|
40
40
|
#### React (tsx)
|
|
41
41
|
|
|
@@ -127,11 +127,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
|
|
|
127
127
|
<div style="opacity: 1; transform: none;">
|
|
128
128
|
<div class="display-flex space-x--1 user-select-none">
|
|
129
129
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
130
|
-
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer
|
|
130
|
+
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
|
|
131
131
|
<div class="display-flex align-items-center justify-content-between">
|
|
132
132
|
<div class="display-flex flex-column gap-5 text-size-14 line-height-14">
|
|
133
|
-
<div>
|
|
134
|
-
<div class="text-size-16 text-medium">
|
|
133
|
+
<div>Thursday</div>
|
|
134
|
+
<div class="text-size-16 text-medium">8 January 2026</div>
|
|
135
135
|
</div>
|
|
136
136
|
<div class="text-color-primary text-size-16 width-20">
|
|
137
137
|
</div>
|
|
@@ -139,11 +139,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
|
|
|
139
139
|
</div>
|
|
140
140
|
</div>
|
|
141
141
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
142
|
-
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer
|
|
142
|
+
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
|
|
143
143
|
<div class="display-flex align-items-center justify-content-between">
|
|
144
144
|
<div class="display-flex flex-column gap-5 text-size-14 line-height-14">
|
|
145
|
-
<div>
|
|
146
|
-
<div class="text-size-16 text-medium">
|
|
145
|
+
<div>Friday</div>
|
|
146
|
+
<div class="text-size-16 text-medium">9 January 2026</div>
|
|
147
147
|
</div>
|
|
148
148
|
<div class="text-color-primary text-size-16 width-20">
|
|
149
149
|
</div>
|
|
@@ -151,11 +151,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
|
|
|
151
151
|
</div>
|
|
152
152
|
</div>
|
|
153
153
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
154
|
-
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
|
|
154
|
+
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
|
|
155
155
|
<div class="display-flex align-items-center justify-content-between">
|
|
156
156
|
<div class="display-flex flex-column gap-5 text-size-14 line-height-14">
|
|
157
|
-
<div>
|
|
158
|
-
<div class="text-size-16 text-medium">
|
|
157
|
+
<div>Saturday</div>
|
|
158
|
+
<div class="text-size-16 text-medium">10 January 2026</div>
|
|
159
159
|
</div>
|
|
160
160
|
<div class="text-color-primary text-size-16 width-20">
|
|
161
161
|
</div>
|
|
@@ -163,11 +163,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
|
|
|
163
163
|
</div>
|
|
164
164
|
</div>
|
|
165
165
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
166
|
-
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
|
|
166
|
+
<div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
|
|
167
167
|
<div class="display-flex align-items-center justify-content-between">
|
|
168
168
|
<div class="display-flex flex-column gap-5 text-size-14 line-height-14">
|
|
169
|
-
<div>
|
|
170
|
-
<div class="text-size-16 text-medium">
|
|
169
|
+
<div>Sunday</div>
|
|
170
|
+
<div class="text-size-16 text-medium">11 January 2026</div>
|
|
171
171
|
</div>
|
|
172
172
|
<div class="text-color-primary text-size-16 width-20">
|
|
173
173
|
</div>
|
|
@@ -206,89 +206,65 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
|
|
|
206
206
|
|
|
207
207
|
### Example: Example 2
|
|
208
208
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
Dec
|
|
214
|
-
14
|
|
215
|
-
2025
|
|
216
|
-
|
|
217
|
-
Dec
|
|
218
|
-
15
|
|
219
|
-
2025
|
|
220
|
-
|
|
221
|
-
Dec
|
|
222
|
-
16
|
|
223
|
-
2025
|
|
209
|
+
Jan
|
|
210
|
+
8
|
|
211
|
+
2026
|
|
224
212
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
213
|
+
Jan
|
|
214
|
+
9
|
|
215
|
+
2026
|
|
228
216
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
217
|
+
Jan
|
|
218
|
+
10
|
|
219
|
+
2026
|
|
232
220
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
221
|
+
Jan
|
|
222
|
+
11
|
|
223
|
+
2026
|
|
236
224
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
225
|
+
Jan
|
|
226
|
+
12
|
|
227
|
+
2026
|
|
240
228
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
229
|
+
Jan
|
|
230
|
+
13
|
|
231
|
+
2026
|
|
244
232
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
233
|
+
Jan
|
|
234
|
+
14
|
|
235
|
+
2026
|
|
248
236
|
|
|
249
237
|
Set to JanuaryToggle Weekends
|
|
250
238
|
|
|
251
239
|
#### Summary
|
|
252
240
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
Dec
|
|
258
|
-
14
|
|
259
|
-
2025
|
|
260
|
-
|
|
261
|
-
Dec
|
|
262
|
-
15
|
|
263
|
-
2025
|
|
264
|
-
|
|
265
|
-
Dec
|
|
266
|
-
16
|
|
267
|
-
2025
|
|
241
|
+
Jan
|
|
242
|
+
8
|
|
243
|
+
2026
|
|
268
244
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
245
|
+
Jan
|
|
246
|
+
9
|
|
247
|
+
2026
|
|
272
248
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
249
|
+
Jan
|
|
250
|
+
10
|
|
251
|
+
2026
|
|
276
252
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
253
|
+
Jan
|
|
254
|
+
11
|
|
255
|
+
2026
|
|
280
256
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
257
|
+
Jan
|
|
258
|
+
12
|
|
259
|
+
2026
|
|
284
260
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
261
|
+
Jan
|
|
262
|
+
13
|
|
263
|
+
2026
|
|
288
264
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
265
|
+
Jan
|
|
266
|
+
14
|
|
267
|
+
2026
|
|
292
268
|
|
|
293
269
|
Set to JanuaryToggle Weekends
|
|
294
270
|
|
|
@@ -411,92 +387,92 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
|
|
|
411
387
|
<div style="opacity: 1; transform: none;">
|
|
412
388
|
<div class="display-flex space-x--1 user-select-none">
|
|
413
389
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
414
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
390
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
415
391
|
<div class="display-flex flex-column gap-3 text-center">
|
|
416
|
-
<div class="text-size-12 line-height-12">
|
|
417
|
-
<div class="text-size-h3 line-height-h3">
|
|
418
|
-
<div class="text-size-12 line-height-12">
|
|
392
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
393
|
+
<div class="text-size-h3 line-height-h3">8</div>
|
|
394
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
419
395
|
</div>
|
|
420
396
|
</div>
|
|
421
397
|
</div>
|
|
422
398
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
423
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
399
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
424
400
|
<div class="display-flex flex-column gap-3 text-center">
|
|
425
|
-
<div class="text-size-12 line-height-12">
|
|
426
|
-
<div class="text-size-h3 line-height-h3">
|
|
427
|
-
<div class="text-size-12 line-height-12">
|
|
401
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
402
|
+
<div class="text-size-h3 line-height-h3">9</div>
|
|
403
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
428
404
|
</div>
|
|
429
405
|
</div>
|
|
430
406
|
</div>
|
|
431
407
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
432
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
408
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
|
|
433
409
|
<div class="display-flex flex-column gap-3 text-center">
|
|
434
|
-
<div class="text-size-12 line-height-12">
|
|
435
|
-
<div class="text-size-h3 line-height-h3">
|
|
436
|
-
<div class="text-size-12 line-height-12">
|
|
410
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
411
|
+
<div class="text-size-h3 line-height-h3">10</div>
|
|
412
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
437
413
|
</div>
|
|
438
414
|
</div>
|
|
439
415
|
</div>
|
|
440
416
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
441
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
417
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
|
|
442
418
|
<div class="display-flex flex-column gap-3 text-center">
|
|
443
|
-
<div class="text-size-12 line-height-12">
|
|
444
|
-
<div class="text-size-h3 line-height-h3">
|
|
445
|
-
<div class="text-size-12 line-height-12">
|
|
419
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
420
|
+
<div class="text-size-h3 line-height-h3">11</div>
|
|
421
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
446
422
|
</div>
|
|
447
423
|
</div>
|
|
448
424
|
</div>
|
|
449
425
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
450
426
|
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
451
427
|
<div class="display-flex flex-column gap-3 text-center">
|
|
452
|
-
<div class="text-size-12 line-height-12">
|
|
453
|
-
<div class="text-size-h3 line-height-h3">
|
|
454
|
-
<div class="text-size-12 line-height-12">
|
|
428
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
429
|
+
<div class="text-size-h3 line-height-h3">12</div>
|
|
430
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
455
431
|
</div>
|
|
456
432
|
</div>
|
|
457
433
|
</div>
|
|
458
434
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
459
435
|
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
460
436
|
<div class="display-flex flex-column gap-3 text-center">
|
|
461
|
-
<div class="text-size-12 line-height-12">
|
|
462
|
-
<div class="text-size-h3 line-height-h3">
|
|
463
|
-
<div class="text-size-12 line-height-12">
|
|
437
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
438
|
+
<div class="text-size-h3 line-height-h3">13</div>
|
|
439
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
464
440
|
</div>
|
|
465
441
|
</div>
|
|
466
442
|
</div>
|
|
467
443
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
468
444
|
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
469
445
|
<div class="display-flex flex-column gap-3 text-center">
|
|
470
|
-
<div class="text-size-12 line-height-12">
|
|
471
|
-
<div class="text-size-h3 line-height-h3">
|
|
472
|
-
<div class="text-size-12 line-height-12">
|
|
446
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
447
|
+
<div class="text-size-h3 line-height-h3">14</div>
|
|
448
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
473
449
|
</div>
|
|
474
450
|
</div>
|
|
475
451
|
</div>
|
|
476
452
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
477
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
453
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
478
454
|
<div class="display-flex flex-column gap-3 text-center">
|
|
479
|
-
<div class="text-size-12 line-height-12">
|
|
480
|
-
<div class="text-size-h3 line-height-h3">
|
|
481
|
-
<div class="text-size-12 line-height-12">
|
|
455
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
456
|
+
<div class="text-size-h3 line-height-h3">15</div>
|
|
457
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
482
458
|
</div>
|
|
483
459
|
</div>
|
|
484
460
|
</div>
|
|
485
461
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
486
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
462
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
|
|
487
463
|
<div class="display-flex flex-column gap-3 text-center">
|
|
488
|
-
<div class="text-size-12 line-height-12">
|
|
489
|
-
<div class="text-size-h3 line-height-h3">
|
|
490
|
-
<div class="text-size-12 line-height-12">
|
|
464
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
465
|
+
<div class="text-size-h3 line-height-h3">16</div>
|
|
466
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
491
467
|
</div>
|
|
492
468
|
</div>
|
|
493
469
|
</div>
|
|
494
470
|
<div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
|
|
495
|
-
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1
|
|
471
|
+
<div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
|
|
496
472
|
<div class="display-flex flex-column gap-3 text-center">
|
|
497
|
-
<div class="text-size-12 line-height-12">
|
|
498
|
-
<div class="text-size-h3 line-height-h3">
|
|
499
|
-
<div class="text-size-12 line-height-12">
|
|
473
|
+
<div class="text-size-12 line-height-12">Jan</div>
|
|
474
|
+
<div class="text-size-h3 line-height-h3">17</div>
|
|
475
|
+
<div class="text-size-12 line-height-12">2026</div>
|
|
500
476
|
</div>
|
|
501
477
|
</div>
|
|
502
478
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/card
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:36.445Z
|
|
7
7
|
|
|
8
8
|
The Card is a utility component designed to simplify usage of default card styling.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/chartColors
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:12:18.159Z
|
|
7
7
|
|
|
8
8
|
The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/chartsGettingStarted
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:12:17.725Z
|
|
7
7
|
|
|
8
8
|
The UIKIT chart components are simple wrapper components for the Recharts charting library.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* CSS Only
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/chat
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:12:02.426Z
|
|
7
7
|
|
|
8
8
|
The chat component is a pure CSS component.
|
|
9
9
|
|
|
@@ -524,7 +524,7 @@ export default () => {
|
|
|
524
524
|
|
|
525
525
|
```html
|
|
526
526
|
<div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
|
|
527
|
-
<div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -
|
|
527
|
+
<div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -6.23436px; transform: none;">
|
|
528
528
|
<div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
|
|
529
529
|
</div>
|
|
530
530
|
<div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Show/Hide
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/collapse
|
|
6
|
-
*Captured:*
|
|
6
|
+
*Captured:* 2026-01-07T12:11:20.254Z
|
|
7
7
|
|
|
8
8
|
The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
|
|
9
9
|
|
|
@@ -83,7 +83,7 @@ export default () => {
|
|
|
83
83
|
<div class="margin-bottom-15">
|
|
84
84
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
|
|
85
85
|
<div class="dropdown btn-group">
|
|
86
|
-
<button type="button" id="
|
|
86
|
+
<button type="button" id="jibqqhal8ns" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
|
|
87
87
|
</span>
|
|
88
88
|
</button>
|
|
89
89
|
</div>
|