Accordion ​
Basic
Loading...
<flint-accordion> ​
Accordion: the wrapper for grouping related components.
- Tag:
<flint-accordion> - Class:
FlintAccordion
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintAccordion } from '@getufy/flint-ui';Usage ​
html
<flint-accordion></flint-accordion>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
expanded | expanded | boolean | false | If true, expands the accordion by default. |
defaultExpanded | default-expanded | boolean | false | Initial expanded state for uncontrolled usage. |
disabled | disabled | boolean | false | If true, the accordion is disabled. |
Events ​
| Event | Detail | Description |
|---|---|---|
flint-accordion-change | { expanded: boolean } | Fired when the accordion's expanded state changes. detail: { expanded: boolean } |
Slots ​
| Name | Description |
|---|---|
(default) | FlintAccordionSummary and FlintAccordionDetails. |
CSS Parts ​
| Name | Description |
|---|---|
base | The accordion's base container element. |
content | The accordion's content wrapper. |
expand-icon | The expand/collapse icon element. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-border-color | — |
--flint-font-family | — |
--flint-text-color | — |
--flint-primary-color | — |
--flint-hover-color | — |
--flint-text-color-muted | — |
--flint-surface-1 | — |
--flint-border-radius-md | — |
--flint-shadow-md | — |
<flint-accordion-summary> ​
Accordion Summary: the wrapper for the Accordion header.
- Tag:
<flint-accordion-summary> - Class:
FlintAccordionSummary
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintAccordionSummary } from '@getufy/flint-ui';Usage ​
html
<flint-accordion-summary></flint-accordion-summary>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
title | title | string | '' | Plain text title. When set, rendered as the default slot content if no children are slotted. |
Events ​
| Event | Detail | Description |
|---|---|---|
flint-accordion-toggle | — | Fired when the summary is clicked or activated via keyboard. |
Slots ​
| Name | Description |
|---|---|
expandIcon | Custom expand/collapse icon. |
(default) | Summary content. If title prop is set and no slot content is provided, the title is rendered. |
<flint-accordion-details> ​
Accordion Details: the wrapper for the Accordion content.
- Tag:
<flint-accordion-details> - Class:
FlintAccordionDetails
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintAccordionDetails } from '@getufy/flint-ui';Usage ​
html
<flint-accordion-details></flint-accordion-details>Slots ​
| Name | Description |
|---|---|
(default) | Detail content. |
CSS Parts ​
| Name | Description |
|---|---|
base | The details inner wrapper element. |
content | The details content element. |
<flint-accordion-actions> ​
Accordion Actions: an optional wrapper that groups a set of buttons.
- Tag:
<flint-accordion-actions> - Class:
FlintAccordionActions
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintAccordionActions } from '@getufy/flint-ui';Usage ​
html
<flint-accordion-actions></flint-accordion-actions>