Page

The ui5-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 enableScrolling to false.

Footer

The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the floatingFooter property.

Note: ui5-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 ui5-page to be rendered. Note: In order for the ui5-page to be displayed, the parent element should have fixed height.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/Page.js";

Basic Sample

Properties

backgroundDesign

Description	Defines the background color of the ui5-page. Note: When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
Type	"List" | "Solid" | "Transparent"
Default	"Solid"

disableScrolling

Description	Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all.
Type	boolean
Default	false

floatingFooter

Description	Defines if the footer should float over the content. Note: When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
Type	boolean
Default	true

hideFooter

Description	Defines the footer visibility.
Type	boolean
Default	false

Slots

header

Description	Defines the header HTML Element.
Type	Array<HTMLElement>

default

Description	Defines the content HTML Element.
Type	Array<HTMLElement>

footer

Description	Defines the footer HTML Element.
Type	Array<HTMLElement>

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

Name	Description
content	Used to style the content section of the component

More Samples

Floating Footer

When floatingFooter property is set, the footer is always visible.