Preview

Usage

<cs-panel-layout panel-position="right" resizable default-panel-size="300">
  <div slot="main">Main content</div>
  <div slot="panel">Side panel</div>
</cs-panel-layout>

Properties

default-panel-sizenumber

Initial panel size, for uncontrolled behavior.

The actual size will be constrained by minPanelSize and maxPanelSize, if set.

displayPanelLayoutProps.Display default: 'all'

Determines which content is displayed:

• 'all': Both panel and main content are displayed.
• 'panel-only': Only panel is displayed.
• 'main-only': Only main content is displayed.

i18n-stringsPanelLayoutProps.I18nStrings

An object containing all the necessary localized strings required by the component.

main-contentunknownrequired

Main content area displayed next to the panel.

main-focusablePanelLayoutProps.FocusableConfig

Makes the main content area focusable. This should be used if there are no focusable elements inside the content, to ensure it is keyboard scrollable.

Provide either {ariaLabel: "Main label"} or {ariaLabelledby: "main-label-id"}

max-panel-sizenumber

The maximum size of the panel.

min-panel-sizenumber

The minimum size of the panel.

panel-contentunknownrequired

Panel contents.

panel-focusablePanelLayoutProps.FocusableConfig

Makes the panel content focusable. This should be used if there are no focusable elements inside the panel, to ensure it is keyboard scrollable.

Provide either {ariaLabel: "Panel label"} or {ariaLabelledby: "panel-label-id"}

panel-positionPanelLayoutProps.PanelPosition default: 'side-end'

Position of the panel with respect to the main content

panel-sizenumber

Size of the panel. If provided, and panel is resizable, the component is controlled, so you must also provide onPanelResize.

The actual size will be constrained by minPanelSize and maxPanelSize, if set.

resizableboolean default: false

Indicates whether the panel is resizable.

Events

layoutChangeCustomEvent<PanelLayoutProps.PanelResizeDetail>

Called when the panel and/or main content size changes. This can be due to user resizing or changes to the available space on the page.

panelResizeCustomEvent<PanelLayoutProps.PanelResizeDetail>

Called when the user resizes the panel.