The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.

Responsiveness

If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.

Layout

• The panel control is a container for controls.
• The panel can have a solid or semi-transparent background.
• The panel always includes a header.
• An info toolbar can be added to the panel to show extra information.

Examples

Types

There are two types of panels: fixed and expandable.

Fixed Panel

Expandable Panel

Components

Guidelines

• Nesting two or more panels is not recommended.
• Do not stack too many panels on one page.

Exceptions

If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.