@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/divider.json

@@ -0,0 +1,93 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:50.158Z",
+    "source": "https://uikit.developers.rio.cloud/#components/divider",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/divider",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "cd987eb2aae0ce841e3bfac5efa24fe9132a1bbf94731a06768aadae545c11d4"
+  },
+  "title": "Divider",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Divider",
+      "body": "",
+      "examples": [
+        {
+          "caption": "2024-01-01",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid gap-50\"><div><h5>Default divider</h5><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div></div><div><h5>Custom spacing value</h5><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.</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 20px; padding-bottom: 20px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></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.</div></div><div><h5>Vertical divider</h5><div class=\"display-flex\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Some button</button><div class=\"Divider position-relative padding-y-2\" style=\"padding-left: 15px; padding-right: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\"></div></div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Some button</button></div></div><div><h5>Used as spacer without a line</h5><div class=\"Divider position-relative width-100pct border border-style-dashed rounded\" style=\"padding-top: 30px; padding-bottom: 30px;\"></div></div><div><h5>With a title</h5><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.</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 35px; padding-bottom: 35px;\"><div class=\"divider-title display-flex align-items-center\"><div class=\"flex-1-0\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"\"><div class=\"tag tag-small\">Some kind of title</div></div><div class=\"flex-1-0\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div></div></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.</div></div><div><h5>With a customized title</h5><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.</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 30px; padding-bottom: 30px;\"><div class=\"divider-title display-flex align-items-center\"><div class=\"\"><div class=\"border border-color-lighter rounded text-color-dark padding-x-10 text-size-12 text-medium\">2024-01-01</div></div><div class=\"flex-1-0\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 2px;\"></div></div></div></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.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { dummyTextShort } from '../../../utils/data';\n\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => (\n    <div className='display-grid gap-50'>\n        <div>\n            <h5>Default divider</h5>\n            <Divider />\n        </div>\n        <div>\n            <h5>Custom spacing value</h5>\n            <div>{dummyTextShort}</div>\n            <Divider spacing={20} />\n            <div>{dummyTextShort}</div>\n        </div>\n        <div>\n            <h5>Vertical divider</h5>\n            <div className='display-flex'>\n                <Button>Some button</Button>\n                <Divider vertical className='padding-y-2' />\n                <Button>Some button</Button>\n            </div>\n        </div>\n        <div>\n            <h5>Used as spacer without a line</h5>\n            <Divider spacing={30} asSpacer className='border border-style-dashed rounded' />\n        </div>\n        <div>\n            <h5>With a title</h5>\n            <div>{dummyTextShort}</div>\n            <Divider spacing={35}>\n                <div className='tag tag-small'>Some kind of title</div>\n            </Divider>\n            <div>{dummyTextShort}</div>\n        </div>\n        <div>\n            <h5>With a customized title</h5>\n            <div>{dummyTextShort}</div>\n            <Divider spacing={30} dividerColor='lighter' dividerWidth={2} titleAlignment='left'>\n                <div className='border border-color-lighter rounded text-color-dark padding-x-10 text-size-12 text-medium'>\n                    2024-01-01\n                </div>\n            </Divider>\n            <div>{dummyTextShort}</div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid gap-50\">\n    <div>\n        <h5>Default divider</h5>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n            <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n            </div>\n        </div>\n    </div>\n    <div>\n        <h5>Custom spacing value</h5>\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.</div>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 20px; padding-bottom: 20px;\">\n            <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n            </div>\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.</div>\n    </div>\n    <div>\n        <h5>Vertical divider</h5>\n        <div class=\"display-flex\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Some button</button>\n            <div class=\"Divider position-relative padding-y-2\" style=\"padding-left: 15px; padding-right: 15px;\">\n                <div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\">\n                </div>\n            </div>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Some button</button>\n        </div>\n    </div>\n    <div>\n        <h5>Used as spacer without a line</h5>\n        <div class=\"Divider position-relative width-100pct border border-style-dashed rounded\" style=\"padding-top: 30px; padding-bottom: 30px;\">\n        </div>\n    </div>\n    <div>\n        <h5>With a title</h5>\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.</div>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 35px; padding-bottom: 35px;\">\n            <div class=\"divider-title display-flex align-items-center\">\n                <div class=\"flex-1-0\">\n                    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n                    </div>\n                </div>\n                <div class=\"\">\n                    <div class=\"tag tag-small\">Some kind of title</div>\n                </div>\n                <div class=\"flex-1-0\">\n                    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n                    </div>\n                </div>\n            </div>\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.</div>\n    </div>\n    <div>\n        <h5>With a customized title</h5>\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.</div>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 30px; padding-bottom: 30px;\">\n            <div class=\"divider-title display-flex align-items-center\">\n                <div class=\"\">\n                    <div class=\"border border-color-lighter rounded text-color-dark padding-x-10 text-size-12 text-medium\">2024-01-01</div>\n                </div>\n                <div class=\"flex-1-0\">\n                    <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 2px;\">\n                    </div>\n                </div>\n            </div>\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.</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "spacing",
+                      "type": "number",
+                      "default": "15",
+                      "description": "The amount of space to either side"
+                    },
+                    {
+                      "name": "dividerWidth",
+                      "type": "1 | 2 | 3",
+                      "default": "1",
+                      "description": "Defines the width of the divider line"
+                    },
+                    {
+                      "name": "dividerColor",
+                      "type": "'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest'3'",
+                      "default": "light",
+                      "description": "Defines the color of the divider line"
+                    },
+                    {
+                      "name": "asSpacer",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Use the component as a spacer element without the divider line"
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Set the orientation for the divider line to vertical. This may be useful for button toolbars or elements on a single row."
+                    },
+                    {
+                      "name": "titleAlignment",
+                      "type": "'left' | 'center' | 'right'",
+                      "default": "center",
+                      "description": "Defines where the children are aligned on the divider line"
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}