Module: app-frame
Table of contents
Functions
Functions
AppFrame
▸ AppFrame(props): ReactElement<any, string | JSXElementConstructor<any>>
AppFrame is a functional component that renders a structured layout using Material UI's Joy UI components. It provides a container (Sheet) with configurable color and variant properties, and optionally includes a title bar. The main content area (children) is wrapped in a Box component to ensure proper layout and styling.
Parameters
| Name | Type | Description |
|---|---|---|
props | Object | The props passed to the AppFrame component. |
props.children | ReactNode | The content to be displayed within the main area of the frame. |
props.color | SheetProps | Optional. Defines the color scheme of the frame; it is one of the color options supported by the Sheet component. |
props.titleBar | ReactNode | Optional. A component to be displayed as the title bar of the frame. |
props.variant | SheetProps | Optional. Specifies the variant of the frame, influencing its styling and appearance according to the variant options available in Sheet. The component utilizes the Sheet and Box components from @mui/joy to create a responsive and stylized layout that is suitable for various application interfaces. The use of invertedColors and other styling options ensures that the frame can be seamlessly integrated into a diverse range of design themes. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<AppFrame
titleBar={<div>Title Bar</div>}
color="primary"
variant="solid"
>
<div>Content goes here</div>
</AppFrame>Defined in
node_modules/@captn/joy/dist/esm/app-frame/index.js:31