@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/appNavigationBar.md

@@ -0,0 +1,274 @@
+# AppNavigationBar
+
+*Category:* Components
+*Section:* Navigation
+*Source:* https://uikit.developers.rio.cloud/#components/appNavigationBar
+*Captured:* 2025-12-12T12:38:10.706Z
+
+## AppNavigationBar
+
+### Example: Example 1
+
+Title of content
+
+#### Summary
+
+Title of content
+
+#### React (tsx)
+
+```tsx
+import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
+
+export default () => (
+    <div className='bg-white border max-width-300'>
+        <AppNavigationBar title='Title of content' />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A ref function assigned to the wrapper element. |
+| title | string \| ReactNode | — | The title for the content that is shown. |
+| titleSize | 'md' \| 'lg' | md | Defines the size of the title. Possible values are "md" and "lg". |
+| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
+| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |
+| onNavigateBack | Function | () => {} | Callback function for when the back navigation button is clicked. |
+| border | boolean | false | Add a light bottom border to the wrapper element. |
+| className | String | — | Additional classes for the wrapper element. |
+
+### Example: Example 2
+
+Title of content
+
+#### Summary
+
+Title of content
+
+#### React (tsx)
+
+```tsx
+import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
+import Button from '@rio-cloud/rio-uikit/components/button/Button';
+
+export default () => (
+    <div className='bg-white border max-width-400'>
+        <AppNavigationBar
+            title='Title of content'
+            right={
+                <div className='btn-toolbar'>
+                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-filter' className='text-color-darker' />
+                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-cog' className='text-color-darker' />
+                </div>
+            }
+        />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A ref function assigned to the wrapper element. |
+| title | string \| ReactNode | — | The title for the content that is shown. |
+| titleSize | 'md' \| 'lg' | md | Defines the size of the title. Possible values are "md" and "lg". |
+| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
+| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |
+| onNavigateBack | Function | () => {} | Callback function for when the back navigation button is clicked. |
+| border | boolean | false | Add a light bottom border to the wrapper element. |
+| className | String | — | Additional classes for the wrapper element. |
+
+### Example: With more space, a back button label can be shown
+
+With more space, a back button label can be shown
+Back
+
+Title of content
+
+#### Summary
+
+With more space, a back button label can be shown
+Back
+
+Title of content
+
+#### React (tsx)
+
+```tsx
+import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <>
+        <FormLabel>With more space, a back button label can be shown</FormLabel>
+        <div className='bg-white max-width-400'>
+            <AppNavigationBar title='Title of content' titleSize='lg' backButtonText='Back' border />
+        </div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A ref function assigned to the wrapper element. |
+| title | string \| ReactNode | — | The title for the content that is shown. |
+| titleSize | 'md' \| 'lg' | md | Defines the size of the title. Possible values are "md" and "lg". |
+| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
+| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |
+| onNavigateBack | Function | () => {} | Callback function for when the back navigation button is clicked. |
+| border | boolean | false | Add a light bottom border to the wrapper element. |
+| className | String | — | Additional classes for the wrapper element. |
+
+### Example: In some cases a subtitle comes in handy
+
+In some cases a subtitle comes in handy
+Back
+
+Title of content
+lorem ipsum dolor sit amet
+
+#### Summary
+
+In some cases a subtitle comes in handy
+Back
+
+Title of content
+lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <>
+        <FormLabel>In some cases a subtitle comes in handy</FormLabel>
+        <div className='bg-white max-width-400'>
+            <AppNavigationBar
+                title='Title of content'
+                titleSize='lg'
+                subtitle='lorem ipsum dolor sit amet'
+                backButtonText='Back'
+                border
+            />
+        </div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A ref function assigned to the wrapper element. |
+| title | string \| ReactNode | — | The title for the content that is shown. |
+| titleSize | 'md' \| 'lg' | md | Defines the size of the title. Possible values are "md" and "lg". |
+| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
+| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |
+| onNavigateBack | Function | () => {} | Callback function for when the back navigation button is clicked. |
+| border | boolean | false | Add a light bottom border to the wrapper element. |
+| className | String | — | Additional classes for the wrapper element. |