Skip to main content

DynamicPage

<ui5-dynamic-page> | Since 2.0.0

A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.

The component consist of several components:

  • DynamicPageTitle - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the DynamicPageHeader.
  • DynamicPageHeader - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.
  • Content area - a generic container, which can have a single UI5 layout.
  • Footer - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.

Usage​

Use the DynamicPage if you need to have a title, that is always visible and a header, that has configurable Expanding/Snapping functionality. If you don't need the Expanding/Snapping functionality it is better to use the ui5-page as a lighter component.

The app can add to the default slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height), or content with own height that may overflow its container. In the second case the DynamicPage will show a scrollbar that allows the user scroll through the content.

Notes:​

  • Snapping of the DynamicPageTitle is not supported in the following case:
  • When the DynamicPage has a scroll bar, the component usually scrolls to the snapping point - the point, where the DynamicPageHeader is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.

Responsive Behavior​

Dynamic page web component implements the responsive paddings design.

Keyboard Handling​

Basic Navigation​

  • [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated. If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header). If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).

Fast Navigation​

  • This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up. In order to use this functionality, you need to import the following module:

  • import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

ES6 Module Import​

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

Basic Usage​

Properties​

hidePinButton​

DescriptionDefines if the pin button is hidden.
Typeboolean
Defaultfalse

headerPinned​

DescriptionDefines if the header is pinned.
Typeboolean
Defaultfalse

showFooter​

DescriptionDefines if the footer is shown.
Typeboolean
Defaultfalse

headerSnapped​

DescriptionDefines if the header is snapped.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the content of the Dynamic Page.
TypeArray<HTMLElement>

titleArea​

DescriptionDefines the title HTML Element.
TypeArray<DynamicPageTitle>

headerArea​

DescriptionDefines the header HTML Element.
TypeArray<DynamicPageHeader>

footerArea​

DescriptionDefines the footer HTML Element.
TypeArray<HTMLElement>

Events​

pin-button-toggle​

DescriptionFired when the pin header button is toggled.
TypeCustomEvent
BubblesYes
CancelableNo

title-toggle​

DescriptionFired when the expand/collapse area of the title is toggled.
TypeCustomEvent
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
contentUsed to style the content of the component
fit-contentUsed to style the fit content container of the component.
footerUsed to style the footer of the component