Block Section

Child component of Block

Overview

Blocks sections can help organize and group content within a Block.

Sample

1
2
3
4
5
6
7
<calcite-block open heading="Layer effects" description="Adjust blur, highlight, and more">
    <calcite-block-section open text="Advanced configuration">
        <calcite-notice open>
            <div slot="message">Some more complex options.</div>
        </calcite-notice>
    </calcite-block-section>
</calcite-block>
v3.0.3

API reference

Properties

PropertyAttributeDescriptionTypeDefault
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
messageOverridesUse this property to override individual strings used by the component.{ collapse?: string; expand?: string; }
openopenWhen true, expands the component and its contents.booleanfalse
statusstatus
deprecatedUse icon-start instead.
Displays a status-related indicator icon.
"idle" | "invalid" | "valid"
texttextThe component header text.string
toggleDisplaytoggle-displaySpecifies how the component's toggle is displayed, where: "button" sets the toggle to a selectable header, and "switch" sets the toggle to a switch."button" | "switch""button"

Slots

NameDescription
default (unnamed)A slot for adding custom content.

Styles

NameDescription
--calcite-block-section-background-colorSpecifies the component's background color.
--calcite-block-section-border-colorSpecifies the component's border color. When open, applies to the component's bottom border.
--calcite-block-section-header-text-colorSpecifies the component's header text color.
--calcite-block-section-text-colorSpecifies the component's text color.
--calcite-block-section-text-color-hoverSpecifies the component's text color on hover.

Events

NameDescriptionBehavior
calciteBlockSectionToggleFires when the header has been clicked.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first tabbable 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