Accordion
As defined by the W3C:
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
<FluentAccordion> wraps the <fluent-accordion> element, a web component implementation of an accordion leveraging the Fluent UI design system.
It uses the <FluentAccordionItem> component for defining the individual accordion items
Examples
Accordion default example
Shows simple usage of the accordion component. You can use the 'start' and 'end' slots to pre- or postfix each accordion item with an icon or text
#end#
Panel two content, using the 'end' slot for extra header content
Panel Four
Panel four content
Last changed accordion item: item with HeaderTemplate, Expanded:
Download:
Accordion with single expand mode
Download:
Control from code
Download:
Documentation
FluentAccordionItem Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Expanded | bool | False | Gets or sets a value indicating whether the item is expanded or collapsed. |
Heading | string? | Gets or sets the heading of the accordion item. Use either this or the FluentAccordionItem.HeadingTemplate parameter.'/>If both are set, this parameter will be used. | |
HeadingLevel | string? | Gets or sets the level of the heading element. Possible values: 1 | 2 | 3 | 4 | 5 | 6 | |
HeadingTemplate | RenderFragment? | Gets or sets the heading content of the accordion item. Use either this or the FluentAccordionItem.Heading parameter.'/>If both are set, this parameter will not be used. | |
Owner | FluentAccordion | Gets or sets the owning FluentTreeView. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ExpandedChanged | EventCallback<bool> | Gets or sets a callback for when the expanded state changes. |
FluentAccordion Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ActiveId | string? | Gets or sets the id of the active accordion item. | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
ExpandMode | AccordionExpandMode? | Multi | Controls the expand mode of the Accordion, either allowing single or multiple item expansion. AccordionExpandMode. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ActiveIdChanged | EventCallback<string> | Gets or sets a callback that updates the bound value. |
OnAccordionItemChange | EventCallback<FluentAccordionItem> | Gets or sets a callback when a accordion item is changed. |