UI5 Web Components
Search
Page
v1.0.0-rc.12
@ui5/webcomponents-fiori
<ui5-page>

Page with floating footer

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis massa sed elementum tempus egestas sed sed risus pretium. Eget nullam non nisi est sit amet facilisis. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus purus in massa tempor nec. Egestas quis ipsum suspendisse ultrices gravida dictum. Amet facilisis magna etiam tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Ac orci phasellus egestas tellus. Quis imperdiet massa tincidunt nunc. Mollis nunc sed id semper risus in hendrerit gravida rutrum.

Amet consectetur adipiscing elit duis tristique. Tortor condimentum lacinia quis vel eros. Elit sed vulputate mi sit amet mauris commodo quis imperdiet. Sed nisi lacus sed viverra tellus in hac habitasse. Praesent tristique magna sit amet purus gravida quis blandit. Magnis dis parturient montes nascetur ridiculus. Sit amet nulla facilisi morbi tempus iaculis urna id. Senectus et netus et malesuada fames. Faucibus ornare suspendisse sed nisi lacus sed. Facilisis volutpat est velit egestas dui id ornare arcu odio. In tellus integer feugiat scelerisque. Eu turpis egestas pretium aenean pharetra magna. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ante in nibh mauris cursus mattis. Sagittis vitae et leo duis.

Sodales ut eu sem integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Tellus rutrum tellus pellentesque eu tincidunt tortor. Etiam tempor orci eu lobortis elementum nibh. Velit laoreet id donec ultrices tincidunt arcu non sodales. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio ut sem nulla pharetra diam sit amet nisl. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Donec enim diam vulputate ut pharetra sit. Posuere ac ut consequat semper viverra nam libero. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Ac placerat vestibulum lectus mauris ultrices.

Consequat semper viverra nam libero justo laoreet. In mollis nunc sed id. Eget egestas purus viverra accumsan in. Diam vulputate ut pharetra sit amet aliquam. Arcu bibendum at varius vel pharetra vel turpis nunc. Lacus sed turpis tincidunt id aliquet risus feugiat. Tempus urna et pharetra pharetra massa massa. Volutpat maecenas volutpat blandit aliquam etiam. Viverra suspendisse potenti nullam ac. Nisl purus in mollis nunc sed id. Nibh mauris cursus mattis molestie a iaculis at erat. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget lorem dolor sed viverra. Pellentesque habitant morbi tristique senectus et. Et tortor at risus viverra adipiscing at in tellus.

Venenatis lectus magna fringilla urna. Sed cras ornare arcu dui vivamus arcu felis. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Arcu dictum varius duis at consectetur lorem donec. Tortor posuere ac ut consequat semper viverra nam. Vulputate mi sit amet mauris commodo quis. Convallis convallis tellus id interdum velit. Ac placerat vestibulum lectus mauris ultrices eros. Nulla at volutpat diam ut venenatis tellus.

Turpis in eu mi bibendum neque egestas congue quisque egestas. Tristique nulla aliquet enim tortor at auctor urna nunc id. Luctus venenatis lectus magna fringilla urna. Quis enim lobortis scelerisque fermentum dui faucibus in. Turpis massa sed elementum tempus egestas. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Justo laoreet sit amet cursus sit amet. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Arcu ac tortor dignissim convallis aenean et tortor at risus. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Dui nunc mattis enim ut tellus elementum sagittis. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Elementum sagittis vitae et leo duis ut diam quam. Vulputate dignissim suspendisse in est ante. Enim diam vulputate ut pharetra sit amet aliquam id diam. Quam vulputate dignissim suspendisse in est ante in nibh. Vestibulum morbi blandit cursus risus at ultrices mi. Nam at lectus urna duis convallis.

Non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Viverra aliquet eget sit amet tellus cras adipiscing enim. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet. In est ante in nibh mauris cursus mattis molestie. Urna condimentum mattis pellentesque id nibh tortor id. Curabitur vitae nunc sed velit dignissim sodales ut. Ac ut consequat semper viverra. Diam maecenas sed enim ut sem viverra aliquet eget sit. Sagittis aliquam malesuada bibendum arcu. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Cras semper auctor neque vitae.

Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Ante in nibh mauris cursus. Iaculis at erat pellentesque adipiscing commodo elit. Lectus sit amet est placerat in egestas. Egestas pretium aenean pharetra magna ac placerat vestibulum. Sed blandit libero volutpat sed cras. At augue eget arcu dictum varius duis. Suscipit adipiscing bibendum est ultricies integer. Nullam ac tortor vitae purus faucibus. Ultricies mi eget mauris pharetra. Quisque non tellus orci ac.

Nisi vitae suscipit tellus mauris a diam. Eu nisl nunc mi ipsum faucibus vitae aliquet. Augue mauris augue neque gravida in fermentum et sollicitudin. Ullamcorper sit amet risus nullam eget felis eget nunc. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Quis commodo odio aenean sed adipiscing diam. Elit sed vulputate mi sit amet. Nullam vehicula ipsum a arcu. Sed sed risus pretium quam. Aliquam sem fringilla ut morbi tincidunt augue. At elementum eu facilisis sed odio. Volutpat sed cras ornare arcu dui. At lectus urna duis convallis convallis. Nunc faucibus a pellentesque sit. Molestie nunc non blandit massa. Eu non diam phasellus vestibulum. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Nisl tincidunt eget nullam non nisi. Nunc vel risus commodo viverra. At augue eget arcu dictum varius duis at.

Facilisi nullam vehicula ipsum a arcu cursus vitae. Massa sapien faucibus et molestie ac. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Sit amet massa vitae tortor condimentum lacinia. Sit amet risus nullam eget felis. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Tellus at urna condimentum mattis pellentesque id nibh tortor. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Magna etiam tempor orci eu lobortis elementum nibh tellus. Volutpat ac tincidunt vitae semper quis. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Id leo in vitae turpis massa sed elementum tempus. Convallis tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Amet cursus sit amet dictum sit amet justo donec. Habitant morbi tristique senectus et netus.

Agree Decline Cancel 
<ui5-page id="page" background-design="List" floating-footer show-footer>
    <ui5-bar design="Header" slot="header">
        <ui5-button icon="home" tooltip="Go home" slot="startContent"></ui5-button>
        <ui5-label>Title</ui5-label>
        <ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
    </ui5-bar>

    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis massa sed elementum tempus egestas sed sed risus pretium. Eget nullam non nisi est sit amet facilisis. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus purus in massa tempor nec. Egestas quis ipsum suspendisse ultrices gravida dictum. Amet facilisis magna etiam tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Ac orci phasellus egestas tellus. Quis imperdiet massa tincidunt nunc. Mollis nunc sed id semper risus in hendrerit gravida rutrum.
        </p>

        <p>
            Amet consectetur adipiscing elit duis tristique. Tortor condimentum lacinia quis vel eros. Elit sed vulputate mi sit amet mauris commodo quis imperdiet. Sed nisi lacus sed viverra tellus in hac habitasse. Praesent tristique magna sit amet purus gravida quis blandit. Magnis dis parturient montes nascetur ridiculus. Sit amet nulla facilisi morbi tempus iaculis urna id. Senectus et netus et malesuada fames. Faucibus ornare suspendisse sed nisi lacus sed. Facilisis volutpat est velit egestas dui id ornare arcu odio. In tellus integer feugiat scelerisque. Eu turpis egestas pretium aenean pharetra magna. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ante in nibh mauris cursus mattis. Sagittis vitae et leo duis.
        </p>

        <p>
            Sodales ut eu sem integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Tellus rutrum tellus pellentesque eu tincidunt tortor. Etiam tempor orci eu lobortis elementum nibh. Velit laoreet id donec ultrices tincidunt arcu non sodales. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio ut sem nulla pharetra diam sit amet nisl. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Donec enim diam vulputate ut pharetra sit. Posuere ac ut consequat semper viverra nam libero. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Ac placerat vestibulum lectus mauris ultrices.
        </p>
    </div>
    <div slot="footer">
        <ui5-bar design="FloatingFooter">
            <ui5-icon name="home" slot="startContent"></ui5-icon>
            <ui5-button design="Positive" slot="endContent">Agree</ui5-button>
            <ui5-button design="Negative" slot="endContent">Decline</ui5-button>
            <ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
        </ui5-bar>
    </div>
</ui5-page>

Overview

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
backgroundDesign
background-design
PageBackgroundDesign
"Solid"
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.

Available options are:
  • Solid
    • (default)
  • Transparent
  • List
disableScrolling
disable-scrolling
boolean
false
Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all.
floatingFooter
floating-footer
boolean
true
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.
hideFooter
hide-footer
boolean
false
Defines the footer visibility.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the content HTML Element.
footer
HTMLElement
Defines the footer HTML Element.
header
HTMLElement
Defines the header HTML Element.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel