ExpandableItem
ExpandableItem creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the summary the content expands or collapses.Properties
enabled (default: true)
When true, the expandable item can be opened and closed. When false, it cannot be toggled.
iconCollapsed (default: "chevronright")
The icon to display when the item is collapsed.
iconExpanded (default: "chevrondown")
The icon to display when the item is expanded.
iconPosition (default: "end")
Determines the position of the icon (start or end).
Available values:
| Value | Description |
|---|---|
start | The icon will appear at the start (left side when the left-to-right direction is set) |
end | The icon will appear at the end (right side when the left-to-right direction is set) (default) |
initiallyExpanded (default: false)
Determines if the component is initially expanded when rendered.
summary
The summary content that is always visible and acts as the trigger.
withSwitch (default: false)
When true, a switch is used instead of an icon to toggle the expanded state.
Events
expandedChange
This event fires when the expandable item is expanded or collapsed. It provides a boolean value indicating the new state.
Exposed Methods
collapse
This method collapses the item.
Signature:
collapse(): voidexpand
This method expands the item.
Signature:
expand(): voidisExpanded
This method returns a boolean indicating whether the item is currently expanded.
Signature:
isExpanded(): booleantoggle
This method toggles the item's expanded state.
Signature:
toggle(): voidStyling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-ExpandableItem | transparent | transparent |
| border-ExpandableItem | none | none |
| borderBottom-ExpandableItem | none | none |
| borderBottomColor-ExpandableItem | none | none |
| borderBottomStyle-ExpandableItem | none | none |
| borderBottomWidth-ExpandableItem | 1px | 1px |
| borderColor-ExpandableItem | $borderColor | $borderColor |
| borderEndEndRadius-ExpandableItem | none | none |
| borderEndStartRadius-ExpandableItem | none | none |
| borderHorizontal-ExpandableItem | none | none |
| borderHorizontalColor-ExpandableItem | none | none |
| borderHorizontalStyle-ExpandableItem | none | none |
| borderHorizontalWidth-ExpandableItem | none | none |
| borderLeft-ExpandableItem | none | none |
| color-ExpandableItem | none | none |
| borderLeftStyle-ExpandableItem | none | none |
| borderLeftWidth-ExpandableItem | none | none |
| borderRadius-ExpandableItem | 0 | 0 |
| borderRight-ExpandableItem | none | none |
| color-ExpandableItem | none | none |
| borderRightStyle-ExpandableItem | none | none |
| borderRightWidth-ExpandableItem | none | none |
| borderStartEndRadius-ExpandableItem | none | none |
| borderStartStartRadius-ExpandableItem | none | none |
| borderStyle-ExpandableItem | solid | solid |
| borderTop-ExpandableItem | none | none |
| borderTopColor-ExpandableItem | none | none |
| borderTopStyle-ExpandableItem | none | none |
| borderTopWidth-ExpandableItem | none | none |
| borderHorizontal-ExpandableItem | none | none |
| borderVerticalColor-ExpandableItem | none | none |
| borderVerticalStyle-ExpandableItem | none | none |
| borderVerticalWidth-ExpandableItem | none | none |
| borderWidth-ExpandableItem | 0 | 0 |
| color-ExpandableItem | $textColor-primary | $textColor-primary |
| color-ExpandableItem--disabled | $textColor--disabled | $textColor--disabled |
| fontFamily-ExpandableItem | $fontFamily | $fontFamily |
| fontSize-ExpandableItem | none | none |
| fontWeight-ExpandableItem | none | none |
| gap-ExpandableItem | $space-2 | $space-2 |
| padding-content-ExpandableItem | none | none |
| padding-ExpandableItem | none | none |
| paddingBottom-content-ExpandableItem | none | none |
| paddingBottom-ExpandableItem | $space-2 | $space-2 |
| paddingHorizontal-content-ExpandableItem | none | none |
| paddingHorizontal-ExpandableItem | none | none |
| paddingHorizontal-ExpandableItem-summary | none | none |
| paddingLeft-content-ExpandableItem | $space-3 | $space-3 |
| paddingLeft-ExpandableItem | $space-0 | $space-0 |
| paddingRight-content-ExpandableItem | $space-3 | $space-3 |
| paddingRight-ExpandableItem | $space-0 | $space-0 |
| paddingTop-content-ExpandableItem | none | none |
| paddingTop-ExpandableItem | $space-2 | $space-2 |
| paddingVertical-content-ExpandableItem | $space-2 | $space-2 |
| paddingVertical-ExpandableItem | none | none |
| paddingVertical-ExpandableItem-summary | none | none |
| transition-ExpandableItem | 0.2s ease | 0.2s ease |