UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

27 lines (26 loc) 1.53 kB
'use client'; import '@ui5/webcomponents-fiori/dist/Page.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; /** * The `Page` is a container component that holds one whole screen of an application. * The page has three distinct areas that can hold content - a header, content area and a footer. * ### Structure * #### Header * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title. * #### Content * The content occupies the main part of the page. Only the content area is scrollable by default. * This can be prevented by setting `noScrolling` to `true`. * #### Footer * The footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property. * * **Note:** `Page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure * that there is enough space for the `Page` to be rendered. * **Note:** In order for the `Page` to be displayed, the parent element should have fixed height. * * * * __Note:__ This is a UI5 Web Component! [Page UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/Page) | [Repository](https://github.com/UI5/webcomponents) */ const Page = withWebComponent('ui5-page', ['backgroundDesign'], ['fixedFooter', 'hideFooter', 'noScrolling'], ['footer', 'header'], []); Page.displayName = 'Page'; export { Page };