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 state attributes are available 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 |
has-tooltip |
Set when the element has a slotted tooltip |
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 }>;