@rio-cloud/uikit-mcp 1.0.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.
Files changed (198) hide show
  1. package/LICENSE +202 -0
  2. package/README.md +91 -0
  3. package/bin/uikit-mcp.mjs +23 -0
  4. package/data/pages/Components/components/accentbar.json +207 -0
  5. package/data/pages/Components/components/activity.json +87 -0
  6. package/data/pages/Components/components/animatednumber.json +99 -0
  7. package/data/pages/Components/components/animations.json +87 -0
  8. package/data/pages/Components/components/appheader.json +291 -0
  9. package/data/pages/Components/components/applayout.json +1198 -0
  10. package/data/pages/Components/components/appnavigationbar.json +327 -0
  11. package/data/pages/Components/components/areacharts.json +563 -0
  12. package/data/pages/Components/components/aspectratioplaceholder.json +75 -0
  13. package/data/pages/Components/components/assettree.json +3080 -0
  14. package/data/pages/Components/components/autosuggests.json +710 -0
  15. package/data/pages/Components/components/avatar.json +157 -0
  16. package/data/pages/Components/components/banner.json +599 -0
  17. package/data/pages/Components/components/barcharts.json +1507 -0
  18. package/data/pages/Components/components/barlist.json +223 -0
  19. package/data/pages/Components/components/basicmap.json +68 -0
  20. package/data/pages/Components/components/bottomsheet.json +601 -0
  21. package/data/pages/Components/components/button.json +583 -0
  22. package/data/pages/Components/components/buttontoolbar.json +63 -0
  23. package/data/pages/Components/components/calendarstripe.json +235 -0
  24. package/data/pages/Components/components/card.json +69 -0
  25. package/data/pages/Components/components/carousel.json +39 -0
  26. package/data/pages/Components/components/chartcolors.json +34 -0
  27. package/data/pages/Components/components/chartsgettingstarted.json +32 -0
  28. package/data/pages/Components/components/chat.json +39 -0
  29. package/data/pages/Components/components/checkbox.json +847 -0
  30. package/data/pages/Components/components/clearableinput.json +789 -0
  31. package/data/pages/Components/components/collapse.json +175 -0
  32. package/data/pages/Components/components/composedcharts.json +159 -0
  33. package/data/pages/Components/components/contentloader.json +233 -0
  34. package/data/pages/Components/components/datatabs.json +680 -0
  35. package/data/pages/Components/components/datepickers.json +287 -0
  36. package/data/pages/Components/components/dialogs.json +1492 -0
  37. package/data/pages/Components/components/divider.json +93 -0
  38. package/data/pages/Components/components/dropdowns.json +936 -0
  39. package/data/pages/Components/components/editablecontent.json +1117 -0
  40. package/data/pages/Components/components/expander.json +377 -0
  41. package/data/pages/Components/components/fade.json +403 -0
  42. package/data/pages/Components/components/fadeexpander.json +75 -0
  43. package/data/pages/Components/components/fadeup.json +127 -0
  44. package/data/pages/Components/components/feedback.json +269 -0
  45. package/data/pages/Components/components/filepickers.json +269 -0
  46. package/data/pages/Components/components/formlabel.json +115 -0
  47. package/data/pages/Components/components/fullscreenmap.json +22 -0
  48. package/data/pages/Components/components/groupeditemlist.json +323 -0
  49. package/data/pages/Components/components/iconlist.json +45 -0
  50. package/data/pages/Components/components/imagepreloader.json +81 -0
  51. package/data/pages/Components/components/labeledelement.json +75 -0
  52. package/data/pages/Components/components/licenseplate.json +69 -0
  53. package/data/pages/Components/components/linecharts.json +987 -0
  54. package/data/pages/Components/components/listmenu.json +313 -0
  55. package/data/pages/Components/components/loadmore.json +175 -0
  56. package/data/pages/Components/components/mainnavigation.json +39 -0
  57. package/data/pages/Components/components/mapcircle.json +34 -0
  58. package/data/pages/Components/components/mapcluster.json +51 -0
  59. package/data/pages/Components/components/mapcontext.json +105 -0
  60. package/data/pages/Components/components/mapdraggablemarker.json +34 -0
  61. package/data/pages/Components/components/mapgettingstarted.json +27 -0
  62. package/data/pages/Components/components/mapgroup.json +1198 -0
  63. package/data/pages/Components/components/mapinfobubble.json +34 -0
  64. package/data/pages/Components/components/maplayergroup.json +34 -0
  65. package/data/pages/Components/components/mapmarker.json +700 -0
  66. package/data/pages/Components/components/mappolygon.json +45 -0
  67. package/data/pages/Components/components/maproute.json +623 -0
  68. package/data/pages/Components/components/maproutegenerator.json +16 -0
  69. package/data/pages/Components/components/mapsettings.json +51 -0
  70. package/data/pages/Components/components/maputils.json +34 -0
  71. package/data/pages/Components/components/multiselects.json +1451 -0
  72. package/data/pages/Components/components/nodata.json +139 -0
  73. package/data/pages/Components/components/notifications.json +65 -0
  74. package/data/pages/Components/components/numbercontrol.json +301 -0
  75. package/data/pages/Components/components/onboarding.json +302 -0
  76. package/data/pages/Components/components/page.json +197 -0
  77. package/data/pages/Components/components/pager.json +93 -0
  78. package/data/pages/Components/components/piecharts.json +731 -0
  79. package/data/pages/Components/components/popover.json +251 -0
  80. package/data/pages/Components/components/position.json +69 -0
  81. package/data/pages/Components/components/radialbarcharts.json +1304 -0
  82. package/data/pages/Components/components/radiobutton.json +1105 -0
  83. package/data/pages/Components/components/releasenotes.json +44 -0
  84. package/data/pages/Components/components/resizer.json +93 -0
  85. package/data/pages/Components/components/responsivecolumnstripe.json +123 -0
  86. package/data/pages/Components/components/responsivevideo.json +75 -0
  87. package/data/pages/Components/components/rioglyph.json +93 -0
  88. package/data/pages/Components/components/rules.json +410 -0
  89. package/data/pages/Components/components/saveableinput.json +703 -0
  90. package/data/pages/Components/components/selects.json +701 -0
  91. package/data/pages/Components/components/sidebar.json +243 -0
  92. package/data/pages/Components/components/sliders.json +235 -0
  93. package/data/pages/Components/components/smoothscrollbars.json +335 -0
  94. package/data/pages/Components/components/spinners.json +343 -0
  95. package/data/pages/Components/components/states.json +1705 -0
  96. package/data/pages/Components/components/statswidgets.json +314 -0
  97. package/data/pages/Components/components/statusbar.json +177 -0
  98. package/data/pages/Components/components/stepbutton.json +57 -0
  99. package/data/pages/Components/components/steppedprogressbars.json +417 -0
  100. package/data/pages/Components/components/subnavigation.json +107 -0
  101. package/data/pages/Components/components/supportmarker.json +45 -0
  102. package/data/pages/Components/components/svgimage.json +81 -0
  103. package/data/pages/Components/components/switch.json +111 -0
  104. package/data/pages/Components/components/tables.json +144 -0
  105. package/data/pages/Components/components/tagmanager.json +86 -0
  106. package/data/pages/Components/components/tags.json +146 -0
  107. package/data/pages/Components/components/teaser.json +188 -0
  108. package/data/pages/Components/components/timeline.json +45 -0
  109. package/data/pages/Components/components/timepicker.json +163 -0
  110. package/data/pages/Components/components/togglebutton.json +247 -0
  111. package/data/pages/Components/components/tooltip.json +270 -0
  112. package/data/pages/Components/components/virtuallist.json +175 -0
  113. package/data/pages/Foundations/foundations.json +2475 -0
  114. package/data/pages/Getting-started/start/changelog.json +22 -0
  115. package/data/pages/Getting-started/start/goodtoknow.json +32 -0
  116. package/data/pages/Getting-started/start/guidelines/color-combinations.json +58 -0
  117. package/data/pages/Getting-started/start/guidelines/custom-css.json +27 -0
  118. package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +22 -0
  119. package/data/pages/Getting-started/start/guidelines/formatting.json +97 -0
  120. package/data/pages/Getting-started/start/guidelines/iframe.json +93 -0
  121. package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +22 -0
  122. package/data/pages/Getting-started/start/guidelines/print-css.json +37 -0
  123. package/data/pages/Getting-started/start/guidelines/spinner.json +144 -0
  124. package/data/pages/Getting-started/start/guidelines/supported-browsers.json +22 -0
  125. package/data/pages/Getting-started/start/guidelines/writing.json +242 -0
  126. package/data/pages/Getting-started/start/howto.json +72 -0
  127. package/data/pages/Getting-started/start/intro.json +37 -0
  128. package/data/pages/Getting-started/start/responsiveness.json +52 -0
  129. package/data/pages/Templates/templates/common-table.json +39 -0
  130. package/data/pages/Templates/templates/detail-views.json +71 -0
  131. package/data/pages/Templates/templates/expandable-details.json +39 -0
  132. package/data/pages/Templates/templates/feature-cards.json +103 -0
  133. package/data/pages/Templates/templates/form-summary.json +39 -0
  134. package/data/pages/Templates/templates/form-toggle.json +39 -0
  135. package/data/pages/Templates/templates/list-blocks.json +119 -0
  136. package/data/pages/Templates/templates/loading-progress.json +39 -0
  137. package/data/pages/Templates/templates/options-panel.json +39 -0
  138. package/data/pages/Templates/templates/panel-variants.json +39 -0
  139. package/data/pages/Templates/templates/progress-cards.json +71 -0
  140. package/data/pages/Templates/templates/progress-success.json +39 -0
  141. package/data/pages/Templates/templates/settings-form.json +39 -0
  142. package/data/pages/Templates/templates/stats-blocks.json +135 -0
  143. package/data/pages/Templates/templates/table-panel.json +39 -0
  144. package/data/pages/Templates/templates/table-row-animation.json +39 -0
  145. package/data/pages/Templates/templates/usage-cards.json +39 -0
  146. package/data/pages/Utilities/utilities/deviceutils.json +39 -0
  147. package/data/pages/Utilities/utilities/featuretoggles.json +42 -0
  148. package/data/pages/Utilities/utilities/fueltypeutils.json +118 -0
  149. package/data/pages/Utilities/utilities/routeutils.json +34 -0
  150. package/data/pages/Utilities/utilities/useaftermount.json +63 -0
  151. package/data/pages/Utilities/utilities/useaverage.json +86 -0
  152. package/data/pages/Utilities/utilities/useclickoutside.json +69 -0
  153. package/data/pages/Utilities/utilities/useclipboard.json +57 -0
  154. package/data/pages/Utilities/utilities/usecount.json +92 -0
  155. package/data/pages/Utilities/utilities/usedarkmode.json +50 -0
  156. package/data/pages/Utilities/utilities/usedebuginfo.json +63 -0
  157. package/data/pages/Utilities/utilities/useeffectonce.json +57 -0
  158. package/data/pages/Utilities/utilities/useelapsedtime.json +57 -0
  159. package/data/pages/Utilities/utilities/useelementsize.json +63 -0
  160. package/data/pages/Utilities/utilities/useesc.json +57 -0
  161. package/data/pages/Utilities/utilities/useevent.json +75 -0
  162. package/data/pages/Utilities/utilities/usefocustrap.json +57 -0
  163. package/data/pages/Utilities/utilities/usefullscreen.json +197 -0
  164. package/data/pages/Utilities/utilities/usehover.json +57 -0
  165. package/data/pages/Utilities/utilities/useinterval.json +63 -0
  166. package/data/pages/Utilities/utilities/useisfocuswithin.json +75 -0
  167. package/data/pages/Utilities/utilities/usekey.json +75 -0
  168. package/data/pages/Utilities/utilities/uselocalstorage.json +69 -0
  169. package/data/pages/Utilities/utilities/uselocationsuggestions.json +110 -0
  170. package/data/pages/Utilities/utilities/usemax.json +86 -0
  171. package/data/pages/Utilities/utilities/usemin.json +86 -0
  172. package/data/pages/Utilities/utilities/usemutationobserver.json +69 -0
  173. package/data/pages/Utilities/utilities/useonlinestatus.json +39 -0
  174. package/data/pages/Utilities/utilities/useonscreen.json +63 -0
  175. package/data/pages/Utilities/utilities/usepostmessage.json +80 -0
  176. package/data/pages/Utilities/utilities/useprevious.json +63 -0
  177. package/data/pages/Utilities/utilities/useresizeobserver.json +65 -0
  178. package/data/pages/Utilities/utilities/usescrollposition.json +103 -0
  179. package/data/pages/Utilities/utilities/usesearch.json +197 -0
  180. package/data/pages/Utilities/utilities/usesorting.json +139 -0
  181. package/data/pages/Utilities/utilities/usestatewithvalidation.json +69 -0
  182. package/data/pages/Utilities/utilities/usesum.json +86 -0
  183. package/data/pages/Utilities/utilities/usetableexport.json +87 -0
  184. package/data/pages/Utilities/utilities/usetableselection.json +311 -0
  185. package/data/pages/Utilities/utilities/usetimeout.json +63 -0
  186. package/data/pages/Utilities/utilities/usetoggle.json +75 -0
  187. package/data/pages/Utilities/utilities/usewindowresize.json +63 -0
  188. package/data/version.json +4 -0
  189. package/docs/content-schema.md +147 -0
  190. package/docs/navigation-inventory.json +1310 -0
  191. package/docs/search-synonyms.json +43 -0
  192. package/package.json +38 -0
  193. package/server/index.mjs +268 -0
  194. package/server/lib/load-docs.mjs +48 -0
  195. package/server/lib/normalise-doc.mjs +220 -0
  196. package/server/lib/render-markdown.mjs +82 -0
  197. package/server/lib/search-index.mjs +49 -0
  198. package/server/lib/types.js +99 -0
package/data/pages/Components/components/smoothscrollbars.json ADDED
@@ -0,0 +1,335 @@
1
+ {
2
+ "metadata": {
3
+ "captured_at": "2025-11-21T12:07:59.775Z",
4
+ "source": "https://uikit.developers.rio.cloud/#components/smoothScrollbars",
5
+ "category": "Components",
6
+ "section": "Misc",
7
+ "slug": "components/smoothscrollbars",
8
+ "version": "v1.13.2",
9
+ "hash_algorithm": "sha256",
10
+ "hash": "e52450aacccddfa1b560c6fe1b27df57207a77ed3a1932834bebdfe6ffe89a48"
11
+ },
12
+ "title": "SmoothScrollbars",
13
+ "lead": null,
14
+ "content": [
15
+ {
16
+ "heading": "SmoothScrollbars",
17
+ "body": "> Note: SmoothScrollbars only work for elements with a certain height. Padding cannot be part of the SmoothScrollbars element and must be added to the child. Mac scrollbars are only visible if a hardware mouse is connected.",
18
+ "examples": [
19
+ {
20
+ "caption": "Always visible",
21
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Always visible</h3><div><code>default</code></div></div>\nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat. \nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
22
+ "tabs": [
23
+ {
24
+ "label": "React",
25
+ "language": "tsx",
26
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nexport default () => (\n <div>\n <SmoothScrollbars className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Always visible</h3>\n <div>\n <code>default</code>\n </div>\n </div>\n {dummyTextLong} {dummyTextLong}\n </div>\n </SmoothScrollbars>\n </div>\n);"
27
+ },
28
+ {
29
+ "label": "HTML",
30
+ "language": "html",
31
+ "code": "<div>\n <div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Always visible</h3>\n <div>\n <code>default</code>\n </div>\n </div>\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n </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": "slideIn",
43
+ "type": "Boolean",
44
+ "default": "false",
45
+ "description": "Defines whether the scrollbars should slide in on hover"
46
+ },
47
+ {
48
+ "name": "largeTrack",
49
+ "type": "Boolean",
50
+ "default": "false",
51
+ "description": "Defines whether the scrollbars should be slightly larger"
52
+ },
53
+ {
54
+ "name": "trackOffset",
55
+ "type": "Boolean",
56
+ "default": "false",
57
+ "description": "Defines whether the scrollbars should have an offset"
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
+ "caption": "Slide in on hover",
73
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Slide in on hover</h3><div><code>slideIn</code></div></div>\nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat. \nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
74
+ "tabs": [
75
+ {
76
+ "label": "React",
77
+ "language": "tsx",
78
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nexport default () => (\n <div>\n <SmoothScrollbars slideIn className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Slide in on hover</h3>\n <div>\n <code>slideIn</code>\n </div>\n </div>\n {dummyTextLong} {dummyTextLong}\n </div>\n </SmoothScrollbars>\n </div>\n);"
79
+ },
80
+ {
81
+ "label": "HTML",
82
+ "language": "html",
83
+ "code": "<div>\n <div class=\"height-200 scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Slide in on hover</h3>\n <div>\n <code>slideIn</code>\n </div>\n </div>\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n </div>\n </div>\n </div>\n</div>"
84
+ },
85
+ {
86
+ "label": "Props",
87
+ "language": "json",
88
+ "code": null,
89
+ "props": [
90
+ {
91
+ "heading": null,
92
+ "rows": [
93
+ {
94
+ "name": "slideIn",
95
+ "type": "Boolean",
96
+ "default": "false",
97
+ "description": "Defines whether the scrollbars should slide in on hover"
98
+ },
99
+ {
100
+ "name": "largeTrack",
101
+ "type": "Boolean",
102
+ "default": "false",
103
+ "description": "Defines whether the scrollbars should be slightly larger"
104
+ },
105
+ {
106
+ "name": "trackOffset",
107
+ "type": "Boolean",
108
+ "default": "false",
109
+ "description": "Defines whether the scrollbars should have an offset"
110
+ },
111
+ {
112
+ "name": "className",
113
+ "type": "String",
114
+ "default": "",
115
+ "description": "Additional classes to be set on the wrapper element"
116
+ }
117
+ ]
118
+ }
119
+ ]
120
+ }
121
+ ]
122
+ },
123
+ {
124
+ "caption": "Larger track",
125
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Larger track</h3><div><code>largeTrack</code></div></div>\nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat. \nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
126
+ "tabs": [
127
+ {
128
+ "label": "React",
129
+ "language": "tsx",
130
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nexport default () => (\n <div>\n <SmoothScrollbars largeTrack className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Larger track</h3>\n <div>\n <code>largeTrack</code>\n </div>\n </div>\n {dummyTextLong} {dummyTextLong}\n </div>\n </SmoothScrollbars>\n </div>\n);"
131
+ },
132
+ {
133
+ "label": "HTML",
134
+ "language": "html",
135
+ "code": "<div>\n <div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Larger track</h3>\n <div>\n <code>largeTrack</code>\n </div>\n </div>\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal scrollbar-track-size-large\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical scrollbar-track-size-large\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n </div>\n </div>\n </div>\n</div>"
136
+ },
137
+ {
138
+ "label": "Props",
139
+ "language": "json",
140
+ "code": null,
141
+ "props": [
142
+ {
143
+ "heading": null,
144
+ "rows": [
145
+ {
146
+ "name": "slideIn",
147
+ "type": "Boolean",
148
+ "default": "false",
149
+ "description": "Defines whether the scrollbars should slide in on hover"
150
+ },
151
+ {
152
+ "name": "largeTrack",
153
+ "type": "Boolean",
154
+ "default": "false",
155
+ "description": "Defines whether the scrollbars should be slightly larger"
156
+ },
157
+ {
158
+ "name": "trackOffset",
159
+ "type": "Boolean",
160
+ "default": "false",
161
+ "description": "Defines whether the scrollbars should have an offset"
162
+ },
163
+ {
164
+ "name": "className",
165
+ "type": "String",
166
+ "default": "",
167
+ "description": "Additional classes to be set on the wrapper element"
168
+ }
169
+ ]
170
+ }
171
+ ]
172
+ }
173
+ ]
174
+ },
175
+ {
176
+ "caption": "Track with offset",
177
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Track with offset</h3><div><code>trackOffset</code></div></div>\nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat. \nLorem 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.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
178
+ "tabs": [
179
+ {
180
+ "label": "React",
181
+ "language": "tsx",
182
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nexport default () => (\n <div>\n <SmoothScrollbars largeTrack trackOffset className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Track with offset</h3>\n <div>\n <code>trackOffset</code>\n </div>\n </div>\n {dummyTextLong} {dummyTextLong}\n </div>\n </SmoothScrollbars>\n </div>\n);"
183
+ },
184
+ {
185
+ "label": "HTML",
186
+ "language": "html",
187
+ "code": "<div>\n <div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Track with offset</h3>\n <div>\n <code>trackOffset</code>\n </div>\n </div>\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n 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.\n\n In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n </div>\n </div>\n </div>\n</div>"
188
+ },
189
+ {
190
+ "label": "Props",
191
+ "language": "json",
192
+ "code": null,
193
+ "props": [
194
+ {
195
+ "heading": null,
196
+ "rows": [
197
+ {
198
+ "name": "slideIn",
199
+ "type": "Boolean",
200
+ "default": "false",
201
+ "description": "Defines whether the scrollbars should slide in on hover"
202
+ },
203
+ {
204
+ "name": "largeTrack",
205
+ "type": "Boolean",
206
+ "default": "false",
207
+ "description": "Defines whether the scrollbars should be slightly larger"
208
+ },
209
+ {
210
+ "name": "trackOffset",
211
+ "type": "Boolean",
212
+ "default": "false",
213
+ "description": "Defines whether the scrollbars should have an offset"
214
+ },
215
+ {
216
+ "name": "className",
217
+ "type": "String",
218
+ "default": "",
219
+ "description": "Additional classes to be set on the wrapper element"
220
+ }
221
+ ]
222
+ }
223
+ ]
224
+ }
225
+ ]
226
+ },
227
+ {
228
+ "caption": "Horizontal Example",
229
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Horizontal Example</h3></div><div class=\"display-flex gap-10\"><div class=\"gap-10 padding-25 bg-lighter display-flex\"><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
230
+ "tabs": [
231
+ {
232
+ "label": "React",
233
+ "language": "tsx",
234
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\nexport default () => (\n <div>\n <SmoothScrollbars className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Horizontal Example</h3>\n </div>\n <div className='display-flex gap-10'>\n <div className='gap-10 padding-25 bg-lighter display-flex'>\n {[...Array(100)].map(() => (\n <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />\n ))}\n </div>\n </div>\n </div>\n </SmoothScrollbars>\n </div>\n);"
235
+ },
236
+ {
237
+ "label": "HTML",
238
+ "language": "html",
239
+ "code": "<div>\n <div class=\"height-200 smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Horizontal Example</h3>\n </div>\n <div class=\"display-flex gap-10\">\n <div class=\"gap-10 padding-25 bg-lighter display-flex\">\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n </div>\n </div>\n </div>\n</div>"
240
+ },
241
+ {
242
+ "label": "Props",
243
+ "language": "json",
244
+ "code": null,
245
+ "props": [
246
+ {
247
+ "heading": null,
248
+ "rows": [
249
+ {
250
+ "name": "slideIn",
251
+ "type": "Boolean",
252
+ "default": "false",
253
+ "description": "Defines whether the scrollbars should slide in on hover"
254
+ },
255
+ {
256
+ "name": "largeTrack",
257
+ "type": "Boolean",
258
+ "default": "false",
259
+ "description": "Defines whether the scrollbars should be slightly larger"
260
+ },
261
+ {
262
+ "name": "trackOffset",
263
+ "type": "Boolean",
264
+ "default": "false",
265
+ "description": "Defines whether the scrollbars should have an offset"
266
+ },
267
+ {
268
+ "name": "className",
269
+ "type": "String",
270
+ "default": "",
271
+ "description": "Additional classes to be set on the wrapper element"
272
+ }
273
+ ]
274
+ }
275
+ ]
276
+ }
277
+ ]
278
+ },
279
+ {
280
+ "caption": "Full Example",
281
+ "rendered_html": "<div class=\"playground-content padding-0 bg-white\" style=\"width: 100%;\"><div><div class=\"height-200 scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"padding-x-50 padding-top-20 padding-bottom-50\"><div class=\"display-flex align-items-baseline gap-10\"><h3>Full Example</h3></div><div class=\"display-flex gap-10\"><div class=\"gap-10 padding-25 bg-lighter display-flex flex-column\"><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-down text-size-20\"></span></div><div class=\"gap-10 padding-25 bg-lighter display-flex\"><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span><span class=\"rioglyph rioglyph-arrow-right text-size-20\"></span></div></div></div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div></div>",
282
+ "tabs": [
283
+ {
284
+ "label": "React",
285
+ "language": "tsx",
286
+ "code": "import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\n\n// eslint-disable-next-line no-bitwise\nconst dummyItems = [...Array(40)].map(() => ~~(Math.random() * 40));\n\nexport default () => (\n <div>\n <SmoothScrollbars slideIn largeTrack trackOffset className='height-200'>\n <div className='padding-x-50 padding-top-20 padding-bottom-50'>\n <div className='display-flex align-items-baseline gap-10'>\n <h3>Full Example</h3>\n </div>\n <div className='display-flex gap-10'>\n <div className='gap-10 padding-25 bg-lighter display-flex flex-column'>\n {[...Array(100)].map(() => (\n <span className='rioglyph rioglyph-arrow-down text-size-20' key={crypto.randomUUID()} />\n ))}\n </div>\n <div className='gap-10 padding-25 bg-lighter display-flex'>\n {[...Array(100)].map(() => (\n <span className='rioglyph rioglyph-arrow-right text-size-20' key={crypto.randomUUID()} />\n ))}\n </div>\n </div>\n </div>\n </SmoothScrollbars>\n </div>\n);"
287
+ },
288
+ {
289
+ "label": "HTML",
290
+ "language": "html",
291
+ "code": "<div>\n <div class=\"height-200 scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n <div class=\"scrollbar-content-wrapper\">\n <div class=\"padding-x-50 padding-top-20 padding-bottom-50\">\n <div class=\"display-flex align-items-baseline gap-10\">\n <h3>Full Example</h3>\n </div>\n <div class=\"display-flex gap-10\">\n <div class=\"gap-10 padding-25 bg-lighter display-flex flex-column\">\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-down text-size-20\">\n </span>\n </div>\n <div class=\"gap-10 padding-25 bg-lighter display-flex\">\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n <span class=\"rioglyph rioglyph-arrow-right text-size-20\">\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n </div>\n </div>\n <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n </div>\n </div>\n </div>\n</div>"
292
+ },
293
+ {
294
+ "label": "Props",
295
+ "language": "json",
296
+ "code": null,
297
+ "props": [
298
+ {
299
+ "heading": null,
300
+ "rows": [
301
+ {
302
+ "name": "slideIn",
303
+ "type": "Boolean",
304
+ "default": "false",
305
+ "description": "Defines whether the scrollbars should slide in on hover"
306
+ },
307
+ {
308
+ "name": "largeTrack",
309
+ "type": "Boolean",
310
+ "default": "false",
311
+ "description": "Defines whether the scrollbars should be slightly larger"
312
+ },
313
+ {
314
+ "name": "trackOffset",
315
+ "type": "Boolean",
316
+ "default": "false",
317
+ "description": "Defines whether the scrollbars should have an offset"
318
+ },
319
+ {
320
+ "name": "className",
321
+ "type": "String",
322
+ "default": "",
323
+ "description": "Additional classes to be set on the wrapper element"
324
+ }
325
+ ]
326
+ }
327
+ ]
328
+ }
329
+ ]
330
+ }
331
+ ]
332
+ }
333
+ ],
334
+ "see_also": []
335
+ }