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.97
Toggle preview themeToggle preview direction

API reference

calcite-panel
v1.0.0-beta.97

Properties

PropertyAttributeDescriptionTypeValues
beforeBack
deprecated
use calcite-flow-item instead.

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

optional
function
A function
() => Promise<void>
closableclosable

When true, displays a close button in the trailing side of the header.

boolean
A boolean property
truefalse
closedclosed

When true, the component will be hidden.

boolean
A boolean property
truefalse
descriptiondescription

A description for the component.

text
A custom string
undefined
disableddisabled

When true, interaction is prevented and the component is displayed with lower opacity.

boolean
A boolean property
truefalse
dismisseddismissed
deprecated
use closed instead.

When true, hides the component.

boolean
A boolean property
truefalse
dismissibledismissible
deprecated
use closable instead

When true, a close button is added to the component.

boolean
A boolean property
truefalse
headingheading

The component header text.

optional
text
A custom string
undefined
headingLevelheading-level

Specifies the number at which section headings should start.

option
Choose from a set of typed values
123456
heightScaleheight-scale

Specifies the maximum height of the component.

optional
option
Choose from a set of typed values
lms
intlBackintl-back
deprecated
use calcite-flow-item instead.

Accessible name for the component's back button. The back button will only be shown when showBackButton is true.

optional
text
A custom string
undefined
intlCloseintl-close

Accessible name for the component's close button. The close button will only be shown when closeable is true.

optional
text
A custom string
undefined
intlOptionsintl-options

Accessible name for the component's actions menu.

optional
text
A custom string
undefined
loadingloading

When true, a busy indicator is displayed.

boolean
A boolean property
truefalse
menuOpenmenu-open

When true, the action menu items in the header-menu-actions slot are open.

boolean
A boolean property
truefalse
showBackButtonshow-back-button
deprecated
use calcite-flow-item instead.

When true, displays a back button in the header.

boolean
A boolean property
truefalse
summarysummary
deprecated
use description instead.

Summary text. A description displayed underneath the heading.

optional
text
A custom string
undefined
widthScalewidth-scale

Specifies the width of the component.

optional
option
Choose from a set of typed values
lms

Events

NameDescriptionDetail
calcitePanelBackClick
deprecated
use calcite-flow-item instead.

Fires when the back button is clicked.

bubblescomposed
void
calcitePanelClose

Fires when the close button is clicked.

bubblescomposed
void
calcitePanelDismiss
deprecated
use calcitePanelClose instead.

Fires when the close button is clicked.

bubblescomposed
void
calcitePanelDismissedChange
deprecated
use calcitePanelClose instead.

Fires when there is a change to the dismissed property value .

bubblescomposed
void
calcitePanelScroll

Fires when the content is scrolled.

bubblescomposed
void

Methods

NameDescriptionSignatureReturns
scrollContentTo

Scrolls the component's content to a specified set of coordinates.

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

Sets focus on the component.

setFocus(focusId?: "back-button" | "dismiss-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 header.

header-actions-start

A slot for adding actions or content to the start side of the 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 calcite-dropdown.

Styles

NameDescriptionCSS Variable
--calcite-panel-max-height

The maximum height of the component.

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

The maximum width of the component.

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

The minimum width of the component.

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