AccordionPanel
Description
The accordion panel element.
Styling
The following shadow DOM parts are exposed for styling:
| Part name | Description |
|---|---|
content |
The wrapper for the collapsible panel content. |
The following attributes are exposed for styling:
| Attribute | Description |
|---|---|
opened |
Set when the collapsible content is expanded and visible. |
disabled |
Set when the element is disabled. |
focus-ring |
Set when the element is focused using the keyboard. |
focused |
Set when the element is focused. |
See Styling Components documentation.
Properties
autofocus
Type: boolean
Specify that this control should have input focus when the page loads.
disabled
Type: boolean
If true, the user cannot interact with this element.
opened
Type: boolean
If true, the collapsible content is visible.
summary
Type: string | null | undefined
A text that is displayed in the heading, if no
element is assigned to the summary slot.
Events
opened-changed
Type: AccordionPanelOpenedChangedEvent
Fired when the opened property changes.
Types
AccordionPanelOpenedChangedEvent
/**
* Fired when the `opened` property changes.
*/
export type AccordionPanelOpenedChangedEvent = CustomEvent<{ value: boolean }>;