Panel

@ui5/webcomponents
<ui5-panel>

Basic Panel

I am a native heading!

Short text.
Another text.

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.

<ui5-panel width="100%" accessible-role="Complementary"
	header-text="Both expandable and expanded" class="full-width">
	<h1 class="content-color">I am a native heading!</h1>
	<ui5-label wrapping-type="Normal">Short text.</ui5-label>
	<br>
	<ui5-label wrapping-type="Normal">Another text.</ui5-label>
	<p class="content-color">
		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.
	</p>
</ui5-panel>
	

Panel with List

Argentina Bulgaria China Germany Hungary England USA Canada
<ui5-panel accessible-role="Complementary"
	header-text="Select your country" class="full-width">
	<ui5-list id="myList1" mode="MultiSelect">
		<ui5-li key="country1">Argentina</ui5-li>
		<ui5-li key="country2">Bulgaria</ui5-li>
		<ui5-li key="country3">China</ui5-li>
		<ui5-li key="country4">Germany</ui5-li>
		<ui5-li key="country5">Hungary</ui5-li>
		<ui5-li key="country6">England</ui5-li>
		<ui5-li key="country7">USA</ui5-li>
		<ui5-li key="country8">Canada</ui5-li>
	</ui5-list>
</ui5-panel>
	

Fixed Panel (Can't be Collapsed/Expanded)

Argentina Bulgaria China Germany
<ui5-panel
	fixed accessible-role="Complementary"
	header-text="Country Of Birth"
	class="panel-width">
	<ui5-list id="myList2" mode="SingleSelectBegin" >
		<ui5-li key="country1">Argentina</ui5-li>
		<ui5-li key="country2">Bulgaria</ui5-li>
		<ui5-li key="country3">China</ui5-li>
		<ui5-li key="country4">Germany</ui5-li>
	</ui5-list>
</ui5-panel>
	

Panel with Custom Header

Countries
Edit Add Remove
Argentina Bulgaria China
<style>
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
</style>

<ui5-panel
	accessible-role="Complementary"
	class="full-width">

	<!-- Panel header -->
	<div slot="header" class="header">
		<ui5-title>Countries</ui5-title>
		<div>
			<ui5-button>Edit</ui5-button>
			<ui5-button design="Emphasized">Add</ui5-button>
			<ui5-button design="Negative">Remove</ui5-button>
		</div>
	</div>

	<ui5-list id="myList1" mode="MultiSelect">
		<ui5-li key="country1">Argentina</ui5-li>
		<ui5-li key="country2">Bulgaria</ui5-li>
		<ui5-li key="country3">China</ui5-li>
	</ui5-list>
</ui5-panel>
	

Overview

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 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.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-panel exposes the following CSS Shadow Parts:
  • header - Used to style the wrapper of the header
  • content - Used to style the wrapper of the content

Keyboard Handling

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/dist/Panel";

Properties/Attributes

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.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
""
Defines the accessible ARIA name of the component.
since v1.0.0-rc.15
accessibleRole
accessible-role
PanelAccessibleRole
"Form"
Sets the accessible ARIA role of the component. Depending on the usage, you can change the role from the default Form to Region or Complementary.
collapsed
boolean
false
Indicates whether the component is collapsed and only the header is displayed.
fixed
boolean
false
Determines whether the component is in a fixed state that is not expandable/collapsible by user interaction.
headerLevel
header-level
TitleLevel
"H2"
Defines the "aria-level" of component heading, set by the headerText.

Available options are: "H6" to "H1".
headerText
header-text
string
""
This property is used to set the header text of the component. The text is visible in both expanded and collapsed states.

Note: This property is overridden by the header slot.
noAnimation
no-animation
boolean
false
Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
since v1.0.0-rc.16

Slots

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 default slot.

Slot
Type
Description
default
Node [0..n]
Defines the content of the component. The content is visible only when the component is expanded.
header
HTMLElement [0..n]
Defines the component header area.

Note: When a header is provided, the headerText property is ignored.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
toggle
Fired when the component is expanded/collapsed by user interaction.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel