eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsLists & data
Accordion
View source
1 min read
Progressive disclosure: a header row that expands to reveal secondary content.
1
using eQuantic.UI.Components;
STATES
collapsed
The panel body.
expanded
Usage
1
2
3
4
5
new Accordion
{
Items = [ new AccordionItem("What fees apply to transfers?") { Content = new FeesAnswer() } ],
Multiple = false,
}
API
Prop
Type
Default
Description
Multiple
bool
false
Allows several panels open at once; false closes the others.
Item.Content
VisualNode?
null
The revealed content.
States
State
Rendering
Collapsed
Chevron down, height zero
Expanded
Chevron rotated, height animates over Motion.State
Pressed
Header wash
Accessibility
The header is a button carrying the expanded state; the content follows it in the focus order.
When to use
FAQs, breakdowns, optional detail.
Avoid
Hiding primary actions.
Nested accordions.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Accordion.cs.