Panel

Calcite Panel is a container that can house interactions as well as live within other Calcite Components.

Overview

Calcite Panel provides a header with heading text and a summary. There are slots for leading and trailing content (Actions, icons, etc.) in the header. The main content area is a blank container.

Calcite Panel works well with Calcite Shell Panel, Calcite Shell Center Row, and Calcite Flow.

Combine Panels within Calcite Flow for an out-of-the-box drill-in experience.

Usage

  • Contain content that has an associated heading, optional summary, and optional actions
  • Contain a level of a Calcite Flow
  • Contain a list

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.82
Toggle preview themeToggle preview direction

API reference

calcite-panel
v1.0.0-beta.82

Properties

PropertyAttributeDescriptionTypeValues
beforeBack

When provided, this method will be called before it is removed from the parent flow.

optional
functionA function
() => Promise<void>
disableddisabled

When true, disabled prevents interaction. This state shows items with lower opacity/grayed.

booleanA boolean property should be present, or not
truefalse
dismisseddismissed

Hides the panel.

booleanA boolean property should be present, or not
truefalse
dismissibledismissible

Displays a close button in the trailing side of the header.

booleanA boolean property should be present, or not
truefalse
headingheading

Heading text.

optional
stringA custom string
undefined
headingLevelheading-level

Number at which section headings should start for this component.

typedChoose from a set of typed values
123456
heightScaleheight-scale

Specifies the maximum height of the panel.

optional
typedChoose from a set of typed values
lms
intlBackintl-back

'Back' text string.

optional
stringA custom string
undefined
intlCloseintl-close

'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.

optional
stringA custom string
undefined
intlOptionsintl-options

'Options' text string for the actions menu.

optional
stringA custom string
undefined
loadingloading

When true, content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
menuOpenmenu-open

Opens the action menu.

booleanA boolean property should be present, or not
truefalse
showBackButtonshow-back-button

Shows a back button in the header.

booleanA boolean property should be present, or not
truefalse
summarysummary

Summary text. A description displayed underneath the heading.

optional
stringA custom string
undefined
widthScalewidth-scale

This sets width of the panel.

optional
typedChoose from a set of typed values
lms

Events

NameDescriptionDetail
calcitePanelBackClick

Emitted when the back button has been clicked.

bubblescomposedcancelable
any
calcitePanelDismiss

Emitted when the close button has been clicked.

bubblescomposedcancelable
any
calcitePanelDismissedChange
deprecateduse calcitePanelDismiss instead.

Emitted when the close button has been clicked.

bubblescomposedcancelable
any
calcitePanelScroll

Emitted when the content has been scrolled.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
scrollContentTo

Scrolls panel content to a particular set of coordinates. ``` myCalcitePanel.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); ```

scrollContentTo(options?: ScrollToOptions) => Promise<void>Promise<void>
setFocus

Sets focus on the component.

setFocus(focusId?: "dismiss-button" | "back-button") => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding custom content.

fab

A slot for adding a `calcite-fab` (floating action button) to perform an action.

header-actions-end

A slot for adding actions or content to the end side of the panel header.

header-actions-start

A slot for adding actions or content to the start side of the panel header.

header-content

A slot for adding custom content to the header.

header-menu-actions

A slot for adding an overflow menu with actions inside a dropdown.

Styles

NameDescriptionCSS Variable
--calcite-panel-max-height

the maximum height of the panel

--calcite-panel-max-height
--calcite-panel-max-width

the maximum width of the panel

--calcite-panel-max-width
--calcite-panel-min-width

the minimum width of the panel

--calcite-panel-min-width

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.