Panels
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
You are currently viewing a sandbox preview version of Spring ’21 | Go back to Spring ’21
Panel Header
About Panel#
A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content.
Use this component when:
- The canvas content extends beyond the boundaries of the viewport, while panning and zooming is supported
- It is not important to see canvas content while completing the task in a Panel
- The task performed in a Panel is momentary
Toggling visibility of a Panel will re-flow the main content.
The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application.
Base#
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
Header#
The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place.
The header of a left/right docked panel has left-aligned text by default and one icon that dismisses the panel. The header title should truncate when it becomes too long for the panel width by using the slds-truncate
class on the title.
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
Centered Text#
To center the header title, add the class slds-panel__header_align-center
to the <div>
with class slds-panel__header
.
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
<div class="slds-panel__header slds-panel__header_align-center">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
Custom Header#
If a panel header requires additional elements outside of a title and close button, The panel header needs to have the class slds-panel__header_custom
added to slds-panel__header
. This notifies the component that it has a custom layout in the header.
<div class="slds-panel__header slds-panel__header_custom">...</div>
The h2
which contains the title of the panel requires the class slds-panel__header-title
.
Invoked via Toggle#
Accessibility Requirement
When toggling the visibility, author must manage user focus by placing the user inside the panel when it opens and returning them to the trigger when it closes.
Positioning#
The slds-panel_docked
element can be positioned on the left or right side of a viewport by adding the class slds-panel_docked-left
or slds-panel_docked-right
.
Left side#
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
Right side#
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
Drilled-In State#
Design Note
If the panel has been drilled into, then the panel displays an arrow facing to the left to indicate the direction the user drilled in from.
Accessibility Requirement
When the user drills in, the author must manage user focus by keeping the user inside the panel when it drills in and returning them to the drill-in trigger when it the user presses the back arrow.
Positioning#
Left side#
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Panel Header">
<svg class="slds-button__icon" aria-hidden="true">
Right side#
Panel Header
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Panel Header">
<svg class="slds-button__icon" aria-hidden="true">
Sizing#
The panel width can be modified by applying a sizing class to the slds-panel
element.
The panels come in 5 different sizes:
Width | SLDS Class |
---|---|
240px | slds-size_small |
320px | slds-size_medium |
400px | slds-size_large |
640px | slds-size_x-large |
100% | slds-size_full |
Panel Visibility#
Open as a drawer#
A panel causes reflow by being in the flow of the layout rather than overlaid on top of the content. To achieve this, simply toggle the class slds-is-open
to the slds-panel_docked
element.
Panel Header
Panels for Filtering#
Filtering lists or reports can be done by using a Filtering expressions inside of a Panel. Check out the Filtering expression component for different states and accessibility requirements.
Accessibility Requirement
Make sure to use assistive text to improve the clarity of what you might be editing, for example, add
Edit filter:
to the button element inside each filterable object.
Filter
Matching all these filters
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
<div class="slds-panel__header">
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Filter">Filter</h2>
<button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Filter">
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-panel |
---|---|
Summary | Panel component |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-panel__section |
---|---|
Summary | Contains sub sections of a panel |
Restrict | .slds-panel div |
Selector | .slds-panel__actions |
---|---|
Summary | Contains form actions at the bottom of a panel |
Restrict | .slds-panel div |
Selector | .slds-panel__header |
---|---|
Summary | Header element of a panel |
Restrict | .slds-panel div |
Selector | .slds-panel__header_custom |
---|---|
Summary | Modifier that notifies panel header that something other than a title and close button exist |
Restrict | .slds-panel__header |
Modifier | True |
Selector | .slds-panel__header_align-center |
---|---|
Summary | Adjusts styling when the title of the header is centered |
Restrict | .slds-panel__header |
Modifier | True |
Selector | .slds-panel__header-title |
---|---|
Summary | Title of the header panel |
Restrict | .slds-panel__header h2 |
Selector | .slds-panel__close |
---|---|
Summary | Close button of a panel |
Restrict | .slds-panel .slds-button |
Selector | .slds-panel__back |
---|---|
Summary | Back button of a panel drilled in |
Restrict | .slds-panel .slds-button |
Selector | .slds-panel__body |
---|---|
Summary | Body element of a panel |
Restrict | .slds-panel div |
Selector | .slds-panel_docked |
---|---|
Summary | Modifier that changes the display of a panel to dock to the viewport |
Restrict | .slds-panel |
Modifier | True |
Selector | .slds-is-open |
---|---|
Summary | Toggles visibility of panel |
Restrict | .slds-panel_docked |
Selector | .slds-panel_docked-left |
---|---|
Summary | Modifier that changes the position of a panel to the left |
Restrict | .slds-panel_docked |
Modifier | True |
Selector | .slds-panel_docked-right |
---|---|
Summary | Modifier that changes the position of a panel to the right |
Restrict | .slds-panel_docked |
Modifier | True |
Selector | .slds-panel_filters |
---|---|
Summary | |
Support | dev-ready |
Restrict | .slds-panel |
Variant | True |
Panels Release Notes
2.7.0
Changed
- Updated panel headers to have left aligned text by default. To center the header title, use the class
slds-panel__header_align-center
. - Updated
slds-panel_body
padding to be 0.75rem around instead of 1rem. - Updated our documentation to reflect that panels always have a close button, but may also have a back button if panel was invoked by drilling in.
Fixed
- Forced panel buttons to keep their square shape by preventing
flex-shrink
.