@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

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

@@ -1,327 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:08.989Z",
-    "source": "https://uikit.developers.rio.cloud/#components/appNavigationBar",
-    "category": "Components",
-    "section": "Navigation",
-    "slug": "components/appnavigationbar",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "86be7239d9ff05db7cc986d7295d5f46beea73f0477965e7bea998ab43626558"
-  },
-  "title": "AppNavigationBar",
-  "lead": null,
-  "content": [
-    {
-      "heading": "AppNavigationBar",
-      "body": "",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"bg-white border max-width-300\"><div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14\"><div class=\"grid-stack-item display-flex align-items-center justify-content-between\"><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darkest\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-left\"></span></button><div class=\"btn-toolbar gap-2\"><span></span></div></div><div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\"><div class=\"ellipsis-1\">Title of content</div></div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';\n\nexport default () => (\n    <div className='bg-white border max-width-300'>\n        <AppNavigationBar title='Title of content' />\n    </div>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"bg-white border max-width-300\">\n    <div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14\">\n        <div class=\"grid-stack-item display-flex align-items-center justify-content-between\">\n            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darkest\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-left\">\n                </span>\n            </button>\n            <div class=\"btn-toolbar gap-2\">\n                <span>\n                </span>\n            </div>\n        </div>\n        <div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\">\n            <div class=\"ellipsis-1\">Title of content</div>\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "ref",
-                      "type": "React.ref",
-                      "default": "",
-                      "description": "A ref function assigned to the wrapper element."
-                    },
-                    {
-                      "name": "title",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "The title for the content that is shown."
-                    },
-                    {
-                      "name": "titleSize",
-                      "type": "'md' | 'lg'",
-                      "default": "md",
-                      "description": "Defines the size of the title. Possible values are \"md\" and \"lg\"."
-                    },
-                    {
-                      "name": "subtitle",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "Adds a subtitle below the title."
-                    },
-                    {
-                      "name": "right",
-                      "type": "Node",
-                      "default": "",
-                      "description": "Right side area for additional options or buttons like filter etc. that is relevant for the shown content."
-                    },
-                    {
-                      "name": "onNavigateBack",
-                      "type": "Function",
-                      "default": "() => {}",
-                      "description": "Callback function for when the back navigation button is clicked."
-                    },
-                    {
-                      "name": "border",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Add a light bottom border to the wrapper element."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes for the wrapper element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "Example 2",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"bg-white border max-width-400\"><div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14\"><div class=\"grid-stack-item display-flex align-items-center justify-content-between\"><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darkest\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-left\"></span></button><div class=\"btn-toolbar gap-2\"><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darker\" tabindex=\"0\"><span class=\"rioglyph rioglyph-filter\"></span></button><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darker\" tabindex=\"0\"><span class=\"rioglyph rioglyph-cog\"></span></button></div></div></div><div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\"><div class=\"ellipsis-1\">Title of content</div></div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';\nimport Button from '@rio-cloud/rio-uikit/components/button/Button';\n\nexport default () => (\n    <div className='bg-white border max-width-400'>\n        <AppNavigationBar\n            title='Title of content'\n            right={\n                <div className='btn-toolbar'>\n                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-filter' className='text-color-darker' />\n                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-cog' className='text-color-darker' />\n                </div>\n            }\n        />\n    </div>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"bg-white border max-width-400\">\n    <div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14\">\n        <div class=\"grid-stack-item display-flex align-items-center justify-content-between\">\n            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darkest\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-left\">\n                </span>\n            </button>\n            <div class=\"btn-toolbar gap-2\">\n                <div class=\"btn-toolbar\">\n                    <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darker\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-filter\">\n                        </span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component text-color-darker\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-cog\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\">\n            <div class=\"ellipsis-1\">Title of content</div>\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "ref",
-                      "type": "React.ref",
-                      "default": "",
-                      "description": "A ref function assigned to the wrapper element."
-                    },
-                    {
-                      "name": "title",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "The title for the content that is shown."
-                    },
-                    {
-                      "name": "titleSize",
-                      "type": "'md' | 'lg'",
-                      "default": "md",
-                      "description": "Defines the size of the title. Possible values are \"md\" and \"lg\"."
-                    },
-                    {
-                      "name": "subtitle",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "Adds a subtitle below the title."
-                    },
-                    {
-                      "name": "right",
-                      "type": "Node",
-                      "default": "",
-                      "description": "Right side area for additional options or buttons like filter etc. that is relevant for the shown content."
-                    },
-                    {
-                      "name": "onNavigateBack",
-                      "type": "Function",
-                      "default": "() => {}",
-                      "description": "Callback function for when the back navigation button is clicked."
-                    },
-                    {
-                      "name": "border",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Add a light bottom border to the wrapper element."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes for the wrapper element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "With more space, a back button label can be shown",
-          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">With more space, a back button label can be shown</div><div class=\"bg-white max-width-400\"><div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter\"><div class=\"grid-stack-item display-flex align-items-center justify-content-between\"><button type=\"button\" class=\"btn btn-muted btn-component text-color-darkest\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-left\"></span>Back</button><div class=\"btn-toolbar gap-2\"><span></span></div></div><div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\"><div class=\"ellipsis-1\">Title of content</div></div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <>\n        <FormLabel>With more space, a back button label can be shown</FormLabel>\n        <div className='bg-white max-width-400'>\n            <AppNavigationBar title='Title of content' titleSize='lg' backButtonText='Back' border />\n        </div>\n    </>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">With more space, a back button label can be shown</div>\n<div class=\"bg-white max-width-400\">\n    <div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter\">\n        <div class=\"grid-stack-item display-flex align-items-center justify-content-between\">\n            <button type=\"button\" class=\"btn btn-muted btn-component text-color-darkest\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-left\">\n                </span>Back</button>\n            <div class=\"btn-toolbar gap-2\">\n                <span>\n                </span>\n            </div>\n        </div>\n        <div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\">\n            <div class=\"ellipsis-1\">Title of content</div>\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "ref",
-                      "type": "React.ref",
-                      "default": "",
-                      "description": "A ref function assigned to the wrapper element."
-                    },
-                    {
-                      "name": "title",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "The title for the content that is shown."
-                    },
-                    {
-                      "name": "titleSize",
-                      "type": "'md' | 'lg'",
-                      "default": "md",
-                      "description": "Defines the size of the title. Possible values are \"md\" and \"lg\"."
-                    },
-                    {
-                      "name": "subtitle",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "Adds a subtitle below the title."
-                    },
-                    {
-                      "name": "right",
-                      "type": "Node",
-                      "default": "",
-                      "description": "Right side area for additional options or buttons like filter etc. that is relevant for the shown content."
-                    },
-                    {
-                      "name": "onNavigateBack",
-                      "type": "Function",
-                      "default": "() => {}",
-                      "description": "Callback function for when the back navigation button is clicked."
-                    },
-                    {
-                      "name": "border",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Add a light bottom border to the wrapper element."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes for the wrapper element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "caption": "In some cases a subtitle comes in handy",
-          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">In some cases a subtitle comes in handy</div><div class=\"bg-white max-width-400\"><div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter\"><div class=\"grid-stack-item display-flex align-items-center justify-content-between\"><button type=\"button\" class=\"btn btn-muted btn-component text-color-darkest\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-left\"></span>Back</button><div class=\"btn-toolbar gap-2\"><span></span></div></div><div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\"><div class=\"ellipsis-1\">Title of content</div><div class=\"text-size-12 line-height-12 text-normal margin-top--2\">lorem ipsum dolor sit amet</div></div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <>\n        <FormLabel>In some cases a subtitle comes in handy</FormLabel>\n        <div className='bg-white max-width-400'>\n            <AppNavigationBar\n                title='Title of content'\n                titleSize='lg'\n                subtitle='lorem ipsum dolor sit amet'\n                backButtonText='Back'\n                border\n            />\n        </div>\n    </>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">In some cases a subtitle comes in handy</div>\n<div class=\"bg-white max-width-400\">\n    <div class=\"AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter\">\n        <div class=\"grid-stack-item display-flex align-items-center justify-content-between\">\n            <button type=\"button\" class=\"btn btn-muted btn-component text-color-darkest\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-left\">\n                </span>Back</button>\n            <div class=\"btn-toolbar gap-2\">\n                <span>\n                </span>\n            </div>\n        </div>\n        <div class=\"grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1\">\n            <div class=\"ellipsis-1\">Title of content</div>\n            <div class=\"text-size-12 line-height-12 text-normal margin-top--2\">lorem ipsum dolor sit amet</div>\n        </div>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "ref",
-                      "type": "React.ref",
-                      "default": "",
-                      "description": "A ref function assigned to the wrapper element."
-                    },
-                    {
-                      "name": "title",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "The title for the content that is shown."
-                    },
-                    {
-                      "name": "titleSize",
-                      "type": "'md' | 'lg'",
-                      "default": "md",
-                      "description": "Defines the size of the title. Possible values are \"md\" and \"lg\"."
-                    },
-                    {
-                      "name": "subtitle",
-                      "type": "string | ReactNode",
-                      "default": "",
-                      "description": "Adds a subtitle below the title."
-                    },
-                    {
-                      "name": "right",
-                      "type": "Node",
-                      "default": "",
-                      "description": "Right side area for additional options or buttons like filter etc. that is relevant for the shown content."
-                    },
-                    {
-                      "name": "onNavigateBack",
-                      "type": "Function",
-                      "default": "() => {}",
-                      "description": "Callback function for when the back navigation button is clicked."
-                    },
-                    {
-                      "name": "border",
-                      "type": "boolean",
-                      "default": "false",
-                      "description": "Add a light bottom border to the wrapper element."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional classes for the wrapper element."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}