Overview
Blocks sections can help organize and group content within a Block.
Sample
<calcite-block open heading="Layer effects" description="Adjust blur, highlight, and more">
<calcite-block-section open text="Advanced configuration">
<calcite-notice open>
<div slot="message">Some more complex options.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | |
iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl" ). | "both" | "end" | "start" | |
iconStart | icon-start | Specifies an icon to display at the start of the component. | string | |
messageOverrides | Use this property to override individual strings used by the component. | {
collapse?: string;
expand?: string;
} | ||
open | open | When true , expands the component and its contents. | boolean | false |
status | status | icon-start instead. | "idle" | "invalid" | "valid" | |
text | text | The component header text. | string | |
toggleDisplay | toggle-display | Specifies how the component's toggle is displayed, where:
"button" sets the toggle to a selectable header, and
"switch" sets the toggle to a switch. | "button" | "switch" | "button" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding custom content. |
Styles
Name | Description |
---|---|
--calcite-block-section-background-color | Specifies the component's background color. |
--calcite-block-section-border-color | Specifies the component's border color. When open , applies to the component's bottom border. |
--calcite-block-section-header-text-color | Specifies the component's header text color. |
--calcite-block-section-text-color | Specifies the component's text color. |
--calcite-block-section-text-color-hover | Specifies the component's text color on hover. |
Events
Name | Description | Behavior |
---|---|---|
calciteBlockSectionToggle | Fires when the header has been clicked. |
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 tabbable element. | setFocus(): Promise<void> |