Panel
The ui5-panel
component is a container which has a header and a
content area and is used
for grouping and displaying information. It can be collapsed to save space on the screen.
Guidelines:​
- Nesting two or more panels is not recommended.
- Do not stack too many panels on one page.
Structure​
The panel's header area consists of a title bar with a header text or custom header.
The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
The custom header can be set through the header
slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
The content area can contain an arbitrary set of controls.
Note: The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
Responsive Behavior​
- If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.
- If the panel has a fixed height, it will take up the space even if the panel is collapsed.
- When the panel is expandable (the
fixed
property is set tofalse
), an arrow icon (pointing to the right) appears in front of the header. - When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.
- When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.
Keyboard Handling​
Fast Navigation​
This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [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/dist/Panel.js";
Basic Sample​
Properties​
headerText​
fixed​
collapsed​
noAnimation​
accessibleRole​
headerLevel​
accessibleName​
stickyHeader​
Slots​
default​
header​
Events​
toggle​
Methods​
No methods available for this component.
CSS Parts​
More Samples​
Fixed Panel​
The fixed panel can't be collapsed when expanded, and can't be expanded if collapsed.
Sticky Header​
The header remains visible upon scrolling the Panel's content.
Custom Header​
You can replace the built-in header using the header slot.