API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
description | description | Specifies a description for the component. | string | |
expanded | expanded | When true , the component is expanded. | boolean | false |
heading | heading | Specifies heading text for the component. | string | |
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 |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding custom content, including nested calcite-accordion-item s. |
actions-end | A slot for adding calcite-action s or content to the end side of the component's header. |
actions-start | A slot for adding calcite-action s or content to the start side of the component's header. |
Styles
Name | Description |
---|---|
--calcite-accordion-border-color | --calcite-accordion-item-border-color . Specifies the component's border color. |
--calcite-accordion-item-background-color | Specifies the component's background color. |
--calcite-accordion-item-border-color | Specifies the component's border color. |
--calcite-accordion-item-icon-color-end | Specifies the component's iconEnd color. Falls back to --calcite-accordion-item-icon-color or current color. |
--calcite-accordion-item-icon-color-start | Specifies the component's iconStart color. Falls back to --calcite-accordion-item-icon-color or current color. |
--calcite-accordion-item-content-space | Specifies the component's padding. |
--calcite-accordion-item-end-icon-color | --calcite-accordion-item-icon-color-end . Specifies the component's iconEnd color. Falls back to --calcite-accordion-item-icon-color or current color. |
--calcite-accordion-item-expand-icon-color | Specifies the component's expand icon color. |
--calcite-accordion-item-header-background-color | Specifies the component's heading background color. |
--calcite-accordion-item-heading-text-color | Specifies the component's heading text color. |
--calcite-accordion-item-icon-color | Specifies the component's default icon color. |
--calcite-accordion-item-start-icon-color | --calcite-accordion-item-icon-color-start . Specifies the component's iconStart color. Falls back to --calcite-accordion-item-icon-color or current color. |
--calcite-accordion-item-text-color | Specifies the component's text color. |
--calcite-accordion-text-color-hover | --calcite-accordion-item-text-color-hover . Specifies the component's main text color on hover. |
--calcite-accordion-text-color-pressed | --calcite-accordion-item-text-color-press . Specifies the component's main text color when pressed. |
--calcite-accordion-text-color | --calcite-accordion-item-text-color . Specifies the component's text color. |
Events
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |