Skip to main content

Page

<ui5-page> | Since 1.0.0-rc.12

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​

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.

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: 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​

DescriptionDefines 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"

noScrolling​

DescriptionDisables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all.
Typeboolean
Defaultfalse

fixedFooter​

DescriptionDefines if the footer is fixed at the very bottom of the page.
Note: When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.
Typeboolean
Defaultfalse

hideFooter​

DescriptionDefines the footer visibility.
Typeboolean
Defaultfalse

Slots​

header​

DescriptionDefines the header HTML Element.
TypeArray<HTMLElement>

default​

DescriptionDefines the content HTML Element.
TypeArray<Node>
DescriptionDefines the footer HTML Element.
TypeArray<HTMLElement>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
contentUsed to style the content section of the component

More Samples​