@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,157 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:49.269Z",
+    "source": "https://uikit.developers.rio.cloud/#components/avatar",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/avatar",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0902ebda01abeb148d0cbc9fa3c696e8140a79c0cee42fb801e28143b93e6d33"
+  },
+  "title": "Avatar",
+  "lead": "The Avatar is a small component designed to render a users image, the initials of the users name or an icon.",
+  "content": [
+    {
+      "heading": "Avatar",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 padding-20 display-flex gap-25\"><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-user \"></span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">JD</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\" style=\"letter-spacing: -0.2px;\">AAK</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">AK</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"avatar\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Divider position-relative\" style=\"padding-left: 15px; padding-right: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\"></div></div><div class=\"Avatar bg-lighter cursor-pointer\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-heart \"></span></div><div class=\"Avatar bg-white border\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-user \"></span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Avatar from '@rio-cloud/rio-uikit/Avatar';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => (\n    <div className='max-width-600 padding-20 display-flex gap-25'>\n        <Avatar />\n        <Avatar name='John Doe' />\n        <Avatar name='Augusta Ada King' />\n        <Avatar name='Augusta Ada King' abbr='AK' />\n        <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' />\n        <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' alt='Kylie Cunningham' />\n\n        <Divider vertical />\n\n        <Avatar iconName='heart' className='cursor-pointer' onClick={() => Notification.info('Avatar clicked')} />\n        <Avatar backgroundColor='bg-white' className='border' />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 padding-20 display-flex gap-25\">\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <span class=\"Avatar-icon rioglyph rioglyph-user \">\n        </span>\n    </div>\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <span class=\"Avatar-initials\">JD</span>\n    </div>\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <span class=\"Avatar-initials\" style=\"letter-spacing: -0.2px;\">AAK</span>\n    </div>\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <span class=\"Avatar-initials\">AK</span>\n    </div>\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"avatar\" class=\"Avatar-image\" draggable=\"false\">\n    </div>\n    <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n        <img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\">\n    </div>\n    <div class=\"Divider position-relative\" style=\"padding-left: 15px; padding-right: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\">\n        </div>\n    </div>\n    <div class=\"Avatar bg-lighter cursor-pointer\" style=\"height: 40px;\">\n        <span class=\"Avatar-icon rioglyph rioglyph-heart \">\n        </span>\n    </div>\n    <div class=\"Avatar bg-white border\" style=\"height: 40px;\">\n        <span class=\"Avatar-icon rioglyph rioglyph-user \">\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "name",
+                      "type": "string",
+                      "default": "",
+                      "description": "When a name is provided, the Avatar automatically generates and displays the initials of that name. The name also appears in a tooltip when hovered over."
+                    },
+                    {
+                      "name": "abbr",
+                      "type": "string",
+                      "default": "",
+                      "description": "The abbreviation can also be defined manually. It is recommended to limit abbreviations to a maximum of 2 to 3 characters."
+                    },
+                    {
+                      "name": "image",
+                      "type": "string",
+                      "default": "",
+                      "description": "The image to be shown. When an image is displayed, the abbreviation is not shown."
+                    },
+                    {
+                      "name": "alt",
+                      "type": "string",
+                      "default": "",
+                      "description": "The image alt text. If not given, the name will be used."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "string",
+                      "default": "user",
+                      "description": "The name of an icon that should be shown instead of initials. If nothing is provided, a default icon will be shown."
+                    },
+                    {
+                      "name": "size",
+                      "type": "number",
+                      "default": "40",
+                      "description": "The height and width of the component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "string",
+                      "default": "bg-lighter",
+                      "description": "The background color for the component. By default, the text and icon color is derived from the background color."
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "string | JSX.Element",
+                      "default": "",
+                      "description": "The content of the Avatars tooltip. if nothing is provided, the name is used."
+                    },
+                    {
+                      "name": "iconClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the icon element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "AvatarGroup",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 padding-20 display-flex flex-column gap-25\"><div class=\"AvatarGroup\"><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-user \"></span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">JD</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\" style=\"letter-spacing: -0.2px;\">AAK</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">AK</span></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">+2</span></div></div><div class=\"AvatarGroup\"><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"Wendy Miller\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\"></div></div><div class=\"AvatarGroup\"><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"Wendy Miller\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><img src=\"https://randomuser.me/api/portraits/women/43.jpg\" alt=\"Nina Reynolds\" class=\"Avatar-image\" draggable=\"false\"></div><div class=\"Avatar bg-lighter\" style=\"height: 40px;\"><span class=\"Avatar-initials\">+2</span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Avatar from '@rio-cloud/rio-uikit/Avatar';\nimport AvatarGroup from '@rio-cloud/rio-uikit/AvatarGroup';\n\nexport default () => (\n    <div className='max-width-600 padding-20 display-flex flex-column gap-25'>\n        <AvatarGroup maxItemsVisible={5}>\n            <Avatar />\n            <Avatar name='John Doe' />\n            <Avatar name='Augusta Ada King' />\n            <Avatar name='Augusta Ada King' abbr='AK' />\n            <Avatar name='Foo Bar' />\n            <Avatar name='Lorem Ipsum' />\n        </AvatarGroup>\n\n        <AvatarGroup maxItemsVisible={3}>\n            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />\n            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />\n        </AvatarGroup>\n\n        <AvatarGroup maxItemsVisible={4}>\n            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />\n            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />\n            <Avatar image='https://randomuser.me/api/portraits/women/43.jpg' name='Nina Reynolds' />\n            <Avatar image='https://randomuser.me/api/portraits/women/42.jpg' name='Sue Hopkins' />\n            <Avatar image='https://randomuser.me/api/portraits/women/41.jpg' name='Alma Snyder' />\n        </AvatarGroup>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 padding-20 display-flex flex-column gap-25\">\n    <div class=\"AvatarGroup\">\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-icon rioglyph rioglyph-user \">\n            </span>\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-initials\">JD</span>\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-initials\" style=\"letter-spacing: -0.2px;\">AAK</span>\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-initials\">AK</span>\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-initials\">+2</span>\n        </div>\n    </div>\n    <div class=\"AvatarGroup\">\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"Wendy Miller\" class=\"Avatar-image\" draggable=\"false\">\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\">\n        </div>\n    </div>\n    <div class=\"AvatarGroup\">\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <img src=\"https://randomuser.me/api/portraits/women/47.jpg\" alt=\"Wendy Miller\" class=\"Avatar-image\" draggable=\"false\">\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <img src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Kylie Cunningham\" class=\"Avatar-image\" draggable=\"false\">\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <img src=\"https://randomuser.me/api/portraits/women/43.jpg\" alt=\"Nina Reynolds\" class=\"Avatar-image\" draggable=\"false\">\n        </div>\n        <div class=\"Avatar bg-lighter\" style=\"height: 40px;\">\n            <span class=\"Avatar-initials\">+2</span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "maxItemsVisible",
+                      "type": "number",
+                      "default": "",
+                      "description": "Maximum number of items to be shown. Items that overflow are grouped into a singleAvatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}