Block

Calcite Block provides a way to organize the interface around groups of functionality.

Overview

Blocks can be statically open or collapsible to help promote hierarchy. Additionally, Blocks have the option to be draggable to reorder elements within the interface.

Usage

  • Organize logically grouped settings
  • Add and arrange content elements that have their own settings

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
EnterToggle (expand/collapse) currently focused block
SpaceToggle (expand/collapse) currently focused block
TabMove focus into/out of block or move between block sections. If the currently focused step is the last step, the focus will leave the component
Tab and ShiftMove focus into/out of block or move between block sections. If the currently focused step is the first step, the focus will leave the component

API reference

calcite-block
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
collapsiblecollapsible

When true, this block will be collapsible.

booleanA boolean property should be present, or not
truefalse
disableddisabled

When true, disabled prevents interaction. This state shows items with lower opacity/grayed.

booleanA boolean property should be present, or not
truefalse
dragHandledrag-handle

When true, displays a drag handle in the header.

booleanA boolean property should be present, or not
truefalse
headingheading

Block heading.

required
stringA custom string
undefined
headingLevelheading-level

Number at which section headings should start for this component.

typedChoose from a set of typed values
123456
intlCollapseintl-collapse

Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.

optional
stringA custom string
"Collapse" (default)
intlExpandintl-expand

Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.

optional
stringA custom string
"Expand" (default)
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
intlOptionsintl-options

Text string used for the actions menu

optional
stringA custom string
"Options" (default)
loadingloading

When true, content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
openopen

When true, the block's content will be displayed.

booleanA boolean property should be present, or not
truefalse
statusstatus

Block status. Updates or adds icon to show related icon and color.

optional
typedChoose from a set of typed values
idleinvalidvalid
summarysummary

Block summary.

stringA custom string
undefined

Events

NameDescriptionDetail
calciteBlockToggle

Emitted when the header has been clicked.

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding content to the block.

control

A slot for adding a single HTML input element in a header.

header-menu-actions

a slot for adding an overflow menu with actions inside a dropdown.

icon

A slot for adding a leading header icon.

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