API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| description | description | Specifies a description for the component. | string | undefined | |
| expanded | expanded | When | boolean | false |
| heading | heading | Specifies the component's heading text. | string | undefined | |
| headingLevel | heading-level | Specifies the heading level number of the component's | HeadingLevel | undefined | |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | IconName | undefined | |
| iconFlipRtl | icon-flip-rtl | Displays the | FlipContext | undefined | |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | IconName | undefined | |
| messageOverrides | Replace localized message strings with your own strings. Note: Individual message keys may change between releases. | Record<string, unknown> | undefined |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content, including nested |
| actions-end | A slot for adding |
| actions-start | A slot for adding |
| content-end | A slot for adding non-actionable elements after the component's header text. |
| content-start | A slot for adding non-actionable elements before the component's header text. |
Styles
| Name | Description |
|---|---|
| --calcite-accordion-border-color | Specifies the component's border color. |
| --calcite-accordion-background-color | Specifies the component's background color. |
| --calcite-accordion-text-color | Specifies the component's text color. |
| --calcite-accordion-text-color-hover | Specifies the component's main text color on hover. |
| --calcite-accordion-text-color-press | Specifies the component's main text color when pressed. |
| --calcite-accordion-item-background-color | --calcite-accordion-background-color instead. Specifies the component's background color. |
| --calcite-accordion-item-border-color | --calcite-accordion-border-color instead. Specifies the component's border color. |
| --calcite-accordion-item-content-space | Specifies the component's padding. |
| --calcite-accordion-item-end-icon-color | Specifies the component's |
| --calcite-accordion-item-expand-icon-color | Specifies the component's expand icon color. |
| --calcite-accordion-item-header-background-color | Specifies the component's |
| --calcite-accordion-item-header-background-color-hover | Specifies the component's |
| --calcite-accordion-item-header-background-color-press | Specifies the component's |
| --calcite-accordion-item-heading-text-color | Specifies the component's |
| --calcite-accordion-item-icon-color | --calcite-icon-color instead. Specifies the component's default icon color. |
| --calcite-accordion-item-start-icon-color | Specifies the component's |
| --calcite-accordion-item-text-color | --calcite-accordion-text-color instead. Specifies the component's text color. |
| --calcite-accordion-item-text-color-hover | --calcite-accordion-text-color-hover instead. Specifies the component's text color on hover. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteAccordionItemCollapse | Fires when the component's content area is collapsed. | |
| calciteAccordionItemExpand | Fires when the component's content area is expanded. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Creates a promise that resolves once the component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |