Panel is a container that can house interactions as well as live within other Calcite Components.
Overview
Panel provides a header with heading text and a summary. There are slots to add Actions and Icons to the start and end of the header. Panel's main content area is a blank container.
Panel works well with Shell Panel and Flow. Combine Panels within Flow for an out-of-the-box drill-in experience.
Usage
- Accommodate content that has an associated
heading, and if applicable adescriptionand/or Actions - Provide a drilled-in workflow with Flow
- Contain a List
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. If the currently focused element is the last, focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first, focus will leave the component. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| beforeClose | Passes a function to run before the component closes. | () => Promise<void> | ||
| closable | closable | When present, displays a close button in the trailing side of the header. | boolean | false |
| closed | closed | When present, the component will be hidden. | boolean | false |
| collapsed | collapsed | When present, hides the component's content area. | boolean | false |
| collapseDirection | collapse-direction | When collapsible is present, specifies the direction of the collapse icon. | "down" | "up" | "down" |
| collapsible | collapsible | When present, the component is collapsible. | boolean | false |
| description | description | A description for the component. | string | |
| disabled | disabled | When present, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| heading | heading | The component header text. | string | |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | |
| icon | icon | Specifies an icon to display. | string | |
| iconFlipRtl | icon-flip-rtl | When present, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| loading | loading | When present, a busy indicator is displayed. | boolean | false |
| menuFlipPlacements | Specifies the component's fallback menu placement when it's initial or specified placement has insufficient space available. | Array<"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start"> | ||
| menuOpen | menu-open | When present, the action menu items in the header-menu-actions slot are open. | boolean | false |
| menuPlacement | menu-placement | Determines where the action menu will be positioned. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | "bottom-end" |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | "absolute" |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content. |
| action-bar | A slot for adding a calcite-action-bar to the component. |
| alerts | A slot for adding calcite-alerts to the component. |
| content-bottom | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) |
| content-top | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). |
| header-actions-start | A slot for adding actions or content to the start side of the header. |
| header-actions-end | A slot for adding actions or content to the end 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. |
| fab | A slot for adding a calcite-fab (floating action button) to perform an action. |
| footer | A slot for adding custom content to the component's footer. Should not be used with the "footer-start" or "footer-end" slots. |
| footer-actions | footer-start and footer-end slots instead. A slot for adding calcite-buttons to the component's footer. |
| footer-end | A slot for adding a trailing footer custom content. Should not be used with the "footer" slot. |
| footer-start | A slot for adding a leading footer custom content. Should not be used with the "footer" slot. |
Styles
| Name | Description |
|---|---|
| --calcite-panel-corner-radius | Specifies the component's corner radius. |
| --calcite-panel-heading-text-color | Specifies the text color of the component's heading. |
| --calcite-panel-icon-color | Specifies the color of the component's icon. |
| --calcite-panel-description-text-color | Specifies the text color of the component's description. |
| --calcite-panel-border-color | Specifies the component's border color. |
| --calcite-panel-background-color | Specifies the component's background color. |
| --calcite-panel-header-background-color | Specifies the background color of the component's header. |
| --calcite-panel-header-action-background-color | Specifies the background color of Panel's closable, collapsible, and elements slotted in header-menu-actions. |
| --calcite-panel-header-action-background-color-hover | Specifies the background color of Panel's closable, collapsible, and elements slotted in header-menu-actions when hovered. |
| --calcite-panel-header-action-background-color-press | Specifies the background color of Panel's closable, collapsible, and elements slotted in header-menu-actions when pressed. |
| --calcite-panel-header-action-text-color | Specifies the text color of Panel's closable, collapsible, and elements slotted in header-menu-actions. |
| --calcite-panel-header-action-text-color-press | Specifies the text color of Panel's closable, collapsible, and elements slotted in header-menu-actions when pressed or hovered. |
| --calcite-panel-footer-background-color | Specifies the background color of the component's footer. |
| --calcite-panel-space | Specifies the padding of the component's "unnamed (default)" slot. |
| --calcite-panel-header-content-space | Specifies the padding of the "header-content" slot. |
| --calcite-panel-footer-space | Specifies the padding of the component's footer. |
| --calcite-popover-border-color | Specifies the border color of the component's internally rendered calcite-popover, which is rendered within a calcite-action menu when slotted calcite-actions are present in the header-actions-end slot. Applies to any slotted calcite-popovers. |
| --calcite-panel-content-space | --calcite-panel-space instead. Specifies the padding of the component's content. |
| --calcite-panel-footer-padding | --calcite-panel-footer-space instead. Specifies the padding of the component's footer. |
| --calcite-panel-header-border-block-end | --calcite-panel-border-color instead. Specifies the component header's block end border. |
Events
| Name | Description | Behavior |
|---|---|---|
| calcitePanelClose | Fires when the close button is clicked. | |
| calcitePanelCollapse | Fires when the component's content area is collapsed. | |
| calcitePanelExpand | Fires when the component's content area is expanded. | |
| calcitePanelScroll | Fires when the content is scrolled. | |
| calcitePanelToggle | Fires when the collapse button is clicked. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| scrollContentTo | Scrolls the component's content to a specified set of coordinates. | scrollContentTo(options?: ScrollToOptions): Promise<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |