DynamicSideContent

The DynamicSideContent (ui5-dynamic-side-content) is a layout component that allows additional content to be displayed in a way that flexibly adapts to different screen sizes. The side content appears in a container next to or directly below the main content (it doesn't overlay). When the side content is triggered, the main content becomes narrower (if appearing side-by-side). The side content contains a separate scrollbar when appearing next to the main content.

Usage

When to use?

Use this component if you want to display relevant information that is not critical for users to complete a task. Users should have access to all the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user.

When not to use?

Don't use it if you want to display navigation or critical information that prevents users from completing a task when they have no access to the side content.

Responsive Behavior

Screen width > 1440px

• Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).
• If the application defines a trigger, the side content can be hidden.

Screen width <= 1440px and > 1024px

• Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of 320px each). If the side content width falls below 320 px, it automatically slides under the main content, unless the app development team specifies that it should disappear.

Screen width <= 1024px and > 720px

• The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only if the sideContentFallDown is set to OnMinimumWidth and screen width is <= 960px and > 720px the side content falls below the main content.

Screen width <= 720px (for example on a mobile device)

• In this case, the side content automatically disappears from the screen (unless specified to stay under the content by setting of sideContentVisibility property to AlwaysShow) and can be triggered from a pre-set trigger (specified within the app). When the side content is triggered, it replaces the main content. We recommend that you always place the trigger for the side content in the same location, such as in the app footer.

A special case allows switching the comparison mode between the main and side content. In this case, the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal split is the same as in the standard view - the side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.

ES6 Module Import

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

Basic Sample

Properties

hideMainContent

Description	Defines the visibility of the main content.
Type	boolean
Default	false

hideSideContent

Description	Defines the visibility of the side content.
Type	boolean
Default	false

sideContentPosition

Description	Defines whether the side content is positioned before the main content (left side in LTR mode), or after the the main content (right side in LTR mode).
Type	"End" | "Start"
Default	"End"

sideContentVisibility

Description	Defines on which breakpoints the side content is visible.
Type	"AlwaysShow" | "ShowAboveL" | "ShowAboveM" | "ShowAboveS" | "NeverShow"
Default	"ShowAboveS"

sideContentFallDown

Description	Defines on which breakpoints the side content falls down below the main content.
Type	"BelowXL" | "BelowL" | "BelowM" | "OnMinimumWidth"
Default	"OnMinimumWidth"

equalSplit

Description	Defines whether the component is in equal split mode. In this mode, the side and the main content take 50:50 percent of the container on all screen sizes except for phone, where the main and side contents are switching visibility using the toggle method.
Type	boolean
Default	false

Slots

default

Description	Defines the main content.
Type	Array<HTMLElement>

sideContent

Description	Defines the side content.
Type	Array<HTMLElement>

Events

layout-change

Description	Fires when the current breakpoint has been changed.
Type	CustomEvent<DynamicSideContentLayoutChangeEventDetail>
Parameters	currentBreakpoint: string the current breakpoint. previousBreakpoint: string the breakpoint that was active before change to current breakpoint. mainContentVisible: boolean visibility of the main content. sideContentVisible: boolean visibility of the side content.

Methods

toggleContents

Description	Toggles visibility of main and side contents on S screen size (mobile device).
Return type	void

CSS Parts

No CSS parts available for this component.

More Samples

Side Content Position

The side content can be placed at the "Start" or at the "End" via the sideContentPosition property.

Equal Split

When equalSplit property is set, the main and side contents take equal space.