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
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| beforeBack | When provided, this method will be called before it is removed from the parent flow. | () => Promise<void> | ||
| disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | truefalse | |
| dismissed | dismissed | Hides the panel. | truefalse | |
| dismissible | dismissible | Displays a close button in the trailing side of the header. | truefalse | |
| heading | heading | Heading text. | undefined | |
| headingLevel | heading-level | Number at which section headings should start for this component. | 123456 | |
| heightScale | height-scale | Specifies the maximum height of the panel. | lms | |
| intlBack | intl-back | 'Back' text string. | undefined | |
| intlClose | intl-close | 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true. | undefined | |
| intlOptions | intl-options | 'Options' text string for the actions menu. | undefined | |
| loading | loading | When true, content is waiting to be loaded. This state shows a busy indicator. | truefalse | |
| menuOpen | menu-open | Opens the action menu. | truefalse | |
| showBackButton | show-back-button | Shows a back button in the header. | truefalse | |
| summary | summary | Summary text. A description displayed underneath the heading. | undefined | |
| widthScale | width-scale | This sets width of the panel. | lms |
Events
| Name | Description | Detail |
|---|---|---|
| calcitePanelBackClick | Emitted when the back button has been clicked. | any |
| calcitePanelDismiss | Emitted when the close button has been clicked. | any |
| calcitePanelDismissedChange | Emitted when the close button has been clicked. | any |
| calcitePanelScroll | Emitted when the content has been scrolled. | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| 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
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content. |
| fab | A slot for adding a `calcite-fab` (floating action button) to perform an action. |
| footer | A slot for adding custom content to the footer. |
| footer-actions | A slot for adding buttons to the footer. |
| 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
| Name | Description | CSS 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 |