Accordion Item

Child component of Accordion

API reference

Properties

PropertyAttributeDescriptionTypeDefault
descriptiondescriptionSpecifies a description for the component.string
expandedexpandedWhen true, the component is expanded.booleanfalse
headingheadingSpecifies heading text for the component.string
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string

Slots

NameDescription
default (unnamed)A slot for adding custom content, including nested calcite-accordion-items.
actions-endA slot for adding calcite-actions or content to the end side of the component's header.
actions-startA slot for adding calcite-actions or content to the start side of the component's header.

Styles

NameDescription
--calcite-accordion-border-color
deprecated Use --calcite-accordion-item-border-color. Specifies the component's border color.
--calcite-accordion-item-background-colorSpecifies the component's background color.
--calcite-accordion-item-border-colorSpecifies the component's border color.
--calcite-accordion-item-icon-color-endSpecifies the component's iconEnd color. Falls back to --calcite-accordion-item-icon-color or current color.
--calcite-accordion-item-icon-color-startSpecifies the component's iconStart color. Falls back to --calcite-accordion-item-icon-color or current color.
--calcite-accordion-item-content-spaceSpecifies the component's padding.
--calcite-accordion-item-end-icon-color
deprecated Use --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-colorSpecifies the component's expand icon color.
--calcite-accordion-item-header-background-colorSpecifies the component's heading background color.
--calcite-accordion-item-heading-text-colorSpecifies the component's heading text color.
--calcite-accordion-item-icon-colorSpecifies the component's default icon color.
--calcite-accordion-item-start-icon-color
deprecated Use --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-colorSpecifies the component's text color.
--calcite-accordion-text-color-hover
deprecated Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover.
--calcite-accordion-text-color-pressed
deprecated Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed.
--calcite-accordion-text-color
deprecated Use --calcite-accordion-item-text-color. Specifies the component's text color.

Events

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close