Block Group provides organization and functionality to a multiple Block components.
Overview
Usage
- Contain related Block components, most often within a Panel
- Support
drag
workflows for BlocksEnabled
Sample
<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>
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
canPull | When provided, the method will be called to determine whether the element is sortable in the component. | (detail: BlockDragDetail) => boolean | ||
canPut | When provided, the method will be called to determine whether the element can be added from another component. | (detail: BlockDragDetail) => boolean | ||
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
dragEnabled | drag-enabled | When true , calcite-block s are sortable via a draggable button. | boolean | false |
group | group | The block-group's group identifier. To drag elements from one group into another, both groups must have the same group value. | string | |
label | label | Specifies 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 | |
loading | loading | When true , a busy indicator is displayed. | boolean | false |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-block elements. |
Events
Name | Description | Behavior |
---|---|---|
calciteBlockGroupDragEnd | Fires when the component's dragging has ended. | |
calciteBlockGroupDragStart | Fires when the component's dragging has started. | |
calciteBlockGroupOrderChange | Fires when the component's item order changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |