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
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Enter | Toggle (expand/collapse) currently focused block |
Space | Toggle (expand/collapse) currently focused block |
Tab | Move 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 Shift | Move 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
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| collapsible | collapsible | When true, this block will be collapsible. | truefalse | |
| disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | truefalse | |
| dragHandle | drag-handle | When true, displays a drag handle in the header. | truefalse | |
| heading | heading | Block heading. | undefined | |
| headingLevel | heading-level | Number at which section headings should start for this component. | 123456 | |
| intlCollapse | intl-collapse | Aria-label for collapsing the toggle and tooltip used for the toggle when expanded. | "Collapse" (default) | |
| intlExpand | intl-expand | Aria-label for expanding the toggle and tooltip used for the toggle when collapsed. | "Expand" (default) | |
| intlLoading | intl-loading | string to override English loading text | "Loading" (default) | |
| intlOptions | intl-options | Text string used for the actions menu | "Options" (default) | |
| loading | loading | When true, content is waiting to be loaded. This state shows a busy indicator. | truefalse | |
| open | open | When true, the block's content will be displayed. | truefalse | |
| status | status | Block status. Updates or adds icon to show related icon and color. | idleinvalidvalid | |
| summary | summary | Block summary. | undefined |
Events
| Name | Description | Detail |
|---|---|---|
| calciteBlockToggle | Emitted when the header has been clicked. | any |
Slots
| Name | Description |
|---|---|
| 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. |