Skip to content

Block Group

Block Group provides organization and functionality to multiple Block components.

Overview

Usage

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

Sample

API reference

Properties

Property	Attribute	Description	Type	Default
canPull		When provided, the method will be called to determine whether the element can move from the component.	`(detail: BlockDragDetail) => boolean \| "clone"`
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 present, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
dragEnabled	drag-enabled	When present, `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`
labelrequired	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 present, a busy indicator is displayed.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`"l" \| "m" \| "s"`	`"m"`
sortDisabled	sort-disabled	When present, and a `group` is defined, `calcite-block`s are no longer sortable.	`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.	bubblescomposed
calciteBlockGroupDragStart	Fires when the component's dragging has started.	bubblescomposed
calciteBlockGroupMoveHalt	deprecatedNo longer necessary. Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.	bubblescomposed
calciteBlockGroupOrderChange	Fires when the component's item order changes.	bubblescomposed

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(options?: FocusOptions): Promise<void>`