@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,327 @@
+{
+  "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": []
+}