@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:48.122Z",
+    "source": "https://uikit.developers.rio.cloud/#components/aspectRatioPlaceholder",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/aspectratioplaceholder",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "82b848280ed4842be6f21a5e41adcaf806316e40e3ff686f4956837362958f47"
+  },
+  "title": "AspectRatioPlaceholder",
+  "lead": "Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.",
+  "content": [
+    {
+      "heading": "AspectRatioPlaceholder",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"row\"><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">Default (16/9)</div><div class=\"position-relative bg-primary display-grid place-items-center\" style=\"aspect-ratio: 16 / 9;\"><span class=\"rioglyph rioglyph-heart text-size-h1 text-color-white\"></span></div></div><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">Custom (1/1)</div><div class=\"position-relative border\" style=\"aspect-ratio: 1 / 1;\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></div></div><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">Custom - same as image size (1000/600)</div><div class=\"position-relative border\" style=\"aspect-ratio: 1000 / 600;\"><div class=\"position-absolute inset-0 bg-size-cover\" style=\"background-image: url(&quot;https://picsum.photos/1000/600&quot;);\"></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import AspectRatioPlaceholder from '@rio-cloud/rio-uikit/AspectRatioPlaceholder';\nimport Spinner from '@rio-cloud/rio-uikit/Spinner';\n\nexport default () => (\n    <div className='row'>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>Default (16/9)</div>\n            <AspectRatioPlaceholder className='bg-primary display-grid place-items-center'>\n                <span className='rioglyph rioglyph-heart text-size-h1 text-color-white' />\n            </AspectRatioPlaceholder>\n        </div>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>Custom (1/1)</div>\n            <AspectRatioPlaceholder className='border' width={1} height={1}>\n                <Spinner isInverse={false} />\n            </AspectRatioPlaceholder>\n        </div>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>Custom - same as image size (1000/600)</div>\n            <AspectRatioPlaceholder className='border' width={1000} height={600}>\n                <div\n                    className='position-absolute inset-0 bg-size-cover'\n                    style={{ backgroundImage: 'url(https://picsum.photos/1000/600)' }}\n                />\n            </AspectRatioPlaceholder>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"row\">\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">Default (16/9)</div>\n        <div class=\"position-relative bg-primary display-grid place-items-center\" style=\"aspect-ratio: 16 / 9;\">\n            <span class=\"rioglyph rioglyph-heart text-size-h1 text-color-white\">\n            </span>\n        </div>\n    </div>\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">Custom (1/1)</div>\n        <div class=\"position-relative border\" style=\"aspect-ratio: 1 / 1;\">\n            <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                <div class=\"spinner\">\n                    <div>\n                    </div>\n                    <div>\n                    </div>\n                    <div>\n                    </div>\n                    <div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">Custom - same as image size (1000/600)</div>\n        <div class=\"position-relative border\" style=\"aspect-ratio: 1000 / 600;\">\n            <div class=\"position-absolute inset-0 bg-size-cover\" style=\"background-image: url(&quot;https://picsum.photos/1000/600&quot;);\">\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "width",
+                      "type": "Number",
+                      "default": "16",
+                      "description": "Defines the aspect ratio width."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number",
+                      "default": "9",
+                      "description": "Defines the aspect ratio height."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The elements to be rendered inside."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}