Accordion
Accordions can be used to make content take up less space, since they can be expanded and collapsed.
They can be used in groups or individually. When grouped together, they will add margins between them, if expanded.
The accordion can be tabbed to and toggled using the space bar.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| color | color | Set to `white` when displayed on a grey background. | |
| isOpen | is-open | Controls whether the accordion should be opened or not. |
CSS Variables
| CSS variable name | Description |
|---|---|
| --f-colors-default-border | bottom border color |
| --f-colors-default-foreground | default foreground color |
| --f-colors-focus-border | focus border color |
| --f-colors-hover-background | hover background color |
| --f-colors-muted-foreground | arrow color |
| --f-colors-surface-background | "white" background color |
| --f-fonts-size-md | font size for summary |
| --f-sizes-lg-padding | top and bottom margin when expanded |
| --f-sizes-md-padding | left margin for arrow |
| --f-sizes-sm-padding | bottom padding for inner body wrapper |
| --f-table-colors-cell-header-default-background | default background color |
Slots
| Name | Description |
|---|---|
| body | What to display inside the collapsable accordion. |
| title | What to display in the clickable title. |
Events
| Name | Description |
|---|---|
| funClick | Emitted when the accordion title is clicked (or when using space bar). |
