I am a native heading!
Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore commodo Lorem laboris nisi Lorem.
Panel with List
Fixed Panel (Can't be Collapsed/Expanded)
Panel with Custom Header
ui5-panelcomponent 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.
- Nesting two or more panels is not recommended.
- Do not stack too many panels on one page.
StructureA panel consists of a title bar with a header text or custom header.
The content area can contain an arbitrary set of controls. 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
headerslot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
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.
- 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
fixedproperty is set to
false), 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.
ES6 Module Import
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.
ui5-panel. Depending on the usage, you can change the role from the default
ui5-panelis collapsed and only the header is displayed.
ui5-panelis in a fixed state that is not expandable/collapsible by user interaction.
ui5-panelheading, set by the
Available options are:
ui5-panel. The text is visible in both expanded and collapsed states.
Note: This property is overridden by the
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
ui5-panel. The content is visible only when the
Note: When a header is provided, the
headerTextproperty is ignored.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as