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. | true false | |
dismissed | dismissed | Hides the panel. | true false | |
dismissible | dismissible | Displays a close button in the trailing side of the header. | true false | |
heading | heading | Heading text. | undefined | |
headingLevel | heading-level | Number at which section headings should start for this component. | 1 2 3 4 5 6 | |
heightScale | height-scale | Specifies the maximum height of the panel. | l m s | |
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. | true false | |
menuOpen | menu-open | Opens the action menu. | true false | |
showBackButton | show-back-button | Shows a back button in the header. | true false | |
summary | summary | Summary text. A description displayed underneath the heading. | undefined | |
widthScale | width-scale | This sets width of the panel. | l m s |
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 |