Block Section

Overview

Blocks sections can help organize and group content within a Block.

Sample

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

API reference

calcite-block-section
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
intlCollapseintl-collapse

Tooltip used for the toggle when expanded.

optional
stringA custom string
undefined
intlExpandintl-expand

Tooltip used for the toggle when collapsed.

optional
stringA custom string
undefined
openopen

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

booleanA boolean property should be present, or not
truefalse
statusstatus

BlockSection status. Adds indicator to show valid or invalid status.

optional
typedChoose from a set of typed values
idleinvalidvalid
texttext

Text displayed in the button.

stringA custom string
undefined
toggleDisplaytoggle-display

This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed.

typedChoose from a set of typed values
button (default)switch

Events

NameDescriptionDetail
calciteBlockSectionToggle

Emitted when the header has been clicked.

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding content to the block section.

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