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. | true false | |
disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | true false | |
dragHandle | drag-handle | When true, displays a drag handle in the header. | true false | |
heading | heading | Block heading. | undefined | |
headingLevel | heading-level | Number at which section headings should start for this component. | 1 2 3 4 5 6 | |
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. | true false | |
open | open | When true, the block's content will be displayed. | true false | |
status | status | Block status. Updates or adds icon to show related icon and color. | idle invalid valid | |
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. |