Block Group

Block Group provides organization and functionality to a multiple Block components.

Overview

Usage

  • Contain related Block components, most often within a Panel
  • Support dragEnabled workflows for Blocks

Sample

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
<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-block-group>
                <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-block-group>
        </calcite-panel>
    </calcite-shell-panel>
    <calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
v3.0.3

API reference

Properties

PropertyAttributeDescriptionTypeDefault
canPullWhen provided, the method will be called to determine whether the element is sortable in the component.(detail: BlockDragDetail) => boolean
canPutWhen provided, the method will be called to determine whether the element can be added from another component.(detail: BlockDragDetail) => boolean
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
dragEnableddrag-enabledWhen true, calcite-blocks are sortable via a draggable button.booleanfalse
groupgroupThe block-group's group identifier. To drag elements from one group into another, both groups must have the same group value.string
labelrequiredlabelSpecifies an accessible name for the component. When dragEnabled is true and multiple group sorting is enabled with group, specifies the component's name for dragging between groups.string
loadingloadingWhen true, a busy indicator is displayed.booleanfalse

Slots

NameDescription
default (unnamed)A slot for adding calcite-block elements.

Events

NameDescriptionBehavior
calciteBlockGroupDragEndFires when the component's dragging has ended.bubblescomposed
calciteBlockGroupDragStartFires when the component's dragging has started.bubblescomposed
calciteBlockGroupOrderChangeFires when the component's item order changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): 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