Panel

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 a description and/or Actions
  • Provide a drilled-in workflow with Flow
  • Contain a List

Sample

5 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<calcite-shell>
    <calcite-shell-panel slot="panel-start" width="l">
        <calcite-panel heading="Map Options">
            <calcite-action icon="question" text="Favorite" slot="header-actions-start"></calcite-action>
            <calcite-action icon="save" text="Save" slot="header-actions-end"></calcite-action>
            <calcite-action icon="reset" text-enabled text="Reset" slot="header-menu-actions"></calcite-action>
            <calcite-action icon="pencil" text-enabled text="Rename" slot="header-menu-actions"></calcite-action>
            <calcite-button width="half" slot="footer" appearance="outline">
                Cancel
            </calcite-button>
            <calcite-button width="half" slot="footer">
                Next
            </calcite-button>
            <calcite-block collapsible heading="Layer effects" description="Adjust blur, highlight, and more"
                icon-start="effects">
                <calcite-notice open>
                    <div slot="message">Use layer effects sparingly, for emphasis</div>
                </calcite-notice>
            </calcite-block>
            <calcite-block collapsible heading="Symbology" description="Select type, color, and transparency"
                icon-start="map-pin">
                <calcite-notice open>
                    <div slot="message">The viewers are going to love this</div>
                </calcite-notice>
            </calcite-block>
            <calcite-fab slot="fab"></calcite-fab>
        </calcite-panel>
    </calcite-shell-panel>
    <calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
v3.0.2

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, focus will leave the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
beforeClosePasses a function to run before the component closes.() => Promise<void>
closableclosableWhen true, displays a close button in the trailing side of the header.booleanfalse
closedclosedWhen true, the component will be hidden.booleanfalse
collapsedcollapsedWhen true, hides the component's content area.booleanfalse
collapsiblecollapsibleWhen true, the component is collapsible.booleanfalse
descriptiondescriptionA description for the component.string
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
headingheadingThe component header text.string
headingLevelheading-levelSpecifies the heading level of the component's heading for proper document structure, without affecting visual styling.1 | 2 | 3 | 4 | 5 | 6
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
menuFlipPlacementsSpecifies the component's fallback menu placement when it's initial or specified placement has insufficient space available.Array<"top" | "bottom" | "right" | "left" | "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">
menuOpenmenu-openWhen true, the action menu items in the header-menu-actions slot are open.booleanfalse
menuPlacementmenu-placementDetermines 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"
messageOverridesUse this property to override individual strings used by the component.{ close?: string; options?: string; collapse?: string; expand?: string; }
overlayPositioningoverlay-positioningDetermines 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"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"

Slots

NameDescription
default (unnamed)A slot for adding custom content.
action-barA slot for adding a calcite-action-bar to the component.
alertsA slot for adding calcite-alerts to the component.
content-bottomA slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
content-topA slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
header-actions-startA slot for adding actions or content to the start side of the header.
header-actions-endA slot for adding actions or content to the end side of the header.
header-contentA slot for adding custom content to the header.
header-menu-actionsA slot for adding an overflow menu with actions inside a calcite-dropdown.
fabA slot for adding a calcite-fab (floating action button) to perform an action.

Styles

NameDescription
--calcite-panel-corner-radiusSpecifies the component's corner radius.
--calcite-panel-heading-text-colorSpecifies the text color of the component's heading.
--calcite-panel-description-text-colorSpecifies the text color of the component's description.
--calcite-panel-border-colorSpecifies the component's border color.
--calcite-panel-background-colorSpecifies the component's background color.
--calcite-panel-header-background-colorSpecifies the background color of the component's header.
--calcite-panel-spaceSpecifies the padding of the component's "unnamed (default)" slot.
--calcite-panel-header-content-spaceSpecifies the padding of the "header-content" slot.
--calcite-action-background-colorSpecifies the background color of the component's closable, collapsible, and back calcite-actions. Applies to any slotted calcite-actions.
--calcite-action-background-color-hoverSpecifies the background color of the component's closable, collapsible, and back calcite-actions when hovered. Applies to any slotted calcite-actions.
--calcite-action-background-color-pressedSpecifies the background color of the component's closable, collapsible, and back calcite-actions when pressed. Applies to any slotted calcite-actions.
--calcite-action-text-color-hoverSpecifies the text and icon color of the component's closable, collapsible, and back calcite-actions when hovered. Applies to any slotted calcite-actions.
--calcite-action-text-color-pressedSpecifies the text and icon color of the component's closable, collapsible, and back calcite-actions when pressed. Applies to any slotted calcite-actions.
--calcite-popover-border-colorSpecifies 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
deprecated Use --calcite-panel-space instead. Specifies the padding of the component's content.
--calcite-panel-header-border-block-end
deprecated Use --calcite-panel-border-color instead. Specifies the component header's block end border.
--calcite-panel-header-action-background-color-hoverSpecifies the background color of the component's calcite-action items in the panel header when hovered.
--calcite-panel-header-action-background-color-pressSpecifies the background color of the component's calcite-action items in the panel header when pressed.
--calcite-panel-header-action-background-colorSpecifies the background color of the component's calcite-action items in the panel header.
--calcite-panel-header-action-indicator-colorSpecifies the color of the component's calcite-action items' indicator in the panel header.
--calcite-panel-header-action-text-color-pressSpecifies the text color of the component's calcite-action items in the panel header when pressed.
--calcite-panel-header-action-text-colorSpecifies the text color of the component's calcite-action items in the panel header.

Events

NameDescriptionBehavior
calcitePanelCloseFires when the close button is clicked.bubblescomposed
calcitePanelScrollFires when the content is scrolled.bubblescomposed
calcitePanelToggleFires when the collapse button is clicked.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
scrollContentToScrolls the component's content to a specified set of coordinates.scrollContentTo(options?: ScrollToOptions): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close