Intro
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
Panel
When to Use
Do
Use the panel if:
- You need to group information.
- You need to give users the option of hiding this information.
- You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search).
Don't
Don’t use the panel if:
- You need to nest panels.
- You need to stack too many panels on one page.
Examples
In this example, the panel displays static text content grouped under a single title. It’s useful for presenting documentation, instructions, or long-form information in a collapsible, scrollable format.
Panel with text
Panel with a nested component
Panel with a nested component
Anatomy
Anatomy of a panel
- Header area: By default, the header is clickable and can be used to toggle between the expanded and collapsed state.
- Title: Title bar with a header text or custom header.
- Header action icons (optional): Up to four icons can appear in the panel header to provide quick access to panel related actions.
- Scrollbar (optional): Appears when content exceeds the visible area.
- Content area: The content area can contain any component or set of components.
- Icon: Used to expand and collapse the content area. The icon rotates when the panel is expanded (arrow points down) or collapsed (arrow points right). Note: If the panel is fixed, no icon is shown.
Types
There are three types of panels: fixed, expandable, and expanded.
Fixed panel
Fixed panels are useful for grouping custom content. They include headers and infobars.
Fixed panel
Expandable Panel
Expandable panels are much like fixed panels, except their content can be expanded and collapsed by clicking on the title bar.
Expandable panel
Expanded Panel
In its expanded state, the panel reveals the content area below the header. If the content exceeds the visible space, a scrollbar appears, allowing users to scroll through the full content. This state is useful when users need access to larger content blocks while retaining the ability to collapse the panel.
Expanded panel
Components
A panel consists of a title bar with a header text or header toolbar, an infobar (optional), and a content area.
The title inside the title bar can be added by using the “headerText” property. If you use the “headerToolbar” aggregation, the “headerText” property is ignored. With the “headerToolbar” aggregation, you can add a toolbar with any toolbar content inside the title bar. For example, if you need a title text on the left and some action buttons on the right, add a title to the toolbar’s content aggregation, toolbar spacer, and then your buttons.
Panel
Behavior and Interaction
Expand/Collapse
- When the panel is expandable, an arrow icon (pointing to the right) appears in front of the header.
- Click anywhere on the title bar to expand and collapse the content area.
- When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.
- When the panel expands, the arrow icon rotates 90 degrees clockwise.
- When the panel collapses, the arrow icon rotates 90 degrees counterclockwise.
- The buttons in the header can be clicked separately.
Panel header with a collapsed arrow icon (pointing right) and title aligned left, and action buttons aligned right within the panel.
The expandable panel allows users to toggle visibility of the content area. An arrow icon indicates the panel’s state and rotates on expand or collapse.
Panel header with an expanded arrow icon (pointing down) and title aligned left, a visible content area, and action buttons aligned to the right.
In the expanded state, the panel content is already visible. If the content exceeds the visible area, a scrollbar appears, allowing users to scroll without affecting the panel layout.
Overflow Scrolling (Content Area)
- By setting the height to use the default property “auto”, the height of the content area will automatically be adjusted to match the height of its content.
- When the height of the panel is set to a fixed size, the content area can be scrolled through.
Panel with scrollable content area, showing a vertical scrollbar on the right.
Responsiveness
If the width of the panel is set to 100% (default), the panel and its contents are resized responsively, depending on its parent container.
If the panel has a fixed height, it will take up the designated space even if the panel is collapsed.
Panel with a long title in the header bar, truncated due to limited space and ending with ellipses.
Localization
The panel component supports localization for both left-to-right (LTR) and right-to-left (RTL) languages. In RTL mode, the panel layout mirrors its alignment, moving the header elements, content, and scroll bar to the left to match the reading direction of RTL languages.
Panel in right-to-left (RTL) layout with header elements aligned to the right and the vertical scrollbar positioned on the left.