Extras
AccordionList
Bit.BlazorUI.ExtrasExpanderListExpanderAccordion
BitAccordionList is a sugar component over the single-item BitAccordion:
instead of wiring several accordions together by hand, you hand it one collection and it renders an item for each
entry and owns the expand/collapse state of all of them - one panel at a time by default, or several at once with
Multiple. That state can be left to the component, seeded with DefaultExpandedKey(s),
two-way bound through ExpandedKey(s), or driven from code with Expand,
Collapse, Toggle, ExpandAll and CollapseAll, while
MaxExpanded caps how many panels stay open at once and OnToggling can refuse a change
before it happens. Everything a single accordion can do is set once for the whole list and overridden per item
where it matters - the icons, the size, the colors, the templates, the actions beside a header, how the panels
are rendered - and the headers answer the arrow, Home and End keys on top of Tab, as the WAI-ARIA accordion
pattern offers.
Notes
To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.
The BitAccordionList is a Multi-API component
which can accept the list of Items in 3 different ways:
1. The BitAccordionListItem class
2. A Custom Generic class
3. The BitAccordionListOption component
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Item
Custom
Option
Basic
The items are provided as a list of
BitAccordionListItem objects, each carrying the
Title and Description of its header and the Body of its panel. The
list renders one BitAccordion per item and owns their
expand/collapse state, so nothing has to be wired up by hand. By default it works in single-expand mode:
opening one panel closes the one that was open.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Multiple
Multiple lets more than one item stay open at the same time; each header then toggles only its
own panel. MaxExpanded puts a ceiling on how many of them may be open at once: opening one
more closes the panel that has been open the longest, so a click always opens the panel it was aimed at
rather than being turned away by a header that answers nothing.
Multiple:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
At most two panels open at once:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
DefaultExpanded
DefaultExpandedKey (single-expand) and DefaultExpandedKeys (multiple-expand) say
which items start open, leaving the list in charge of everything that happens afterwards. An item can also
open itself through its own IsExpanded, which the defaults take precedence over. A
Key that is not given is generated from the position of the item, so the keys below are
spelled out to keep them readable.
Single (DefaultExpandedKey):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Multiple (DefaultExpandedKeys):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Collapsible
Collapsible="false" keeps one panel open at all times: the header of the last expanded item
stops answering the pointer and the keyboard and reports itself as aria-disabled, which is
the state the WAI-ARIA authoring practices ask for a header whose panel cannot be closed. Another item can
still take its place, and it is only the header that is closed off - Collapse,
Toggle and CollapseAll still drive the list.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Icons
ExpanderIconName replaces the chevron of every item, and each item can override it with one of
its own. ExpandedExpanderIconName swaps the icon while the panel is open - which reports the
state on its own, so the rotation is dropped along with it - while NoExpanderRotation keeps
the icon still without swapping it and HideExpanderIcon removes it altogether (an item can opt
back in with HideExpanderIcon="false"). ExpanderIconPosition moves the expander to
the start of the header, and each item can carry an IconName of its own, drawn ahead of the
title.
Per-item expander icon and leading icon:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Swapped while expanded (ExpandedExpanderIconName):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
At the start of the header (ExpanderIconPosition):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Without an expander icon (HideExpanderIcon):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Actions
ActionsTemplate renders content beside the header of every item, outside of the toggle button
and of the heading it sits in, so it can hold interactive elements of its own - a menu, a delete button, a
switch - without nesting a control inside another one. An item can also carry its own Actions,
which takes precedence over the template.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Last action:
Disabled & Read-only
An item with
IsEnabled="false" is greyed out and its header leaves the tab order, while
ReadOnly is for the panel that has to stay as it is rather than the one that is turned off:
it keeps the colors of a live item and its place in the tab order, reports itself as
aria-disabled, and still raises OnItemClick so the page can say why nothing
moved. Both can be set for the whole list or per item, and the item value wins.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Clicks on the read-only header: 0
Events
OnExpand, OnCollapse and OnToggle report the item that moved -
including the one single-expand mode closes on its own to make room.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Last expanded:
Last collapsed:
Last toggled:
Each item can also have its own click handler.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Item click count: 0
Cancelling a toggle
OnToggling runs before an item moves and can leave it where it is by setting
Cancel on its arguments. They carry the item, its key, whether it is about to expand and what
asked for the change - a click on the header, or one of the public methods. The callback is awaited, so it
can also load the content of the panel or ask for a confirmation first, and nothing else toggles the list
while it runs - the header it was asked about says as much while it waits, reporting itself as
aria-busy and taking a busy cursor, rather than going on looking like a toggle that answers
at once.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Last request:
Binding
@bind-ExpandedKey (single-expand) and @bind-ExpandedKeys (multiple-expand) hand
the open state to the page: the list reports every change through them, and a value written from outside
moves the panels the same way a click does.
Bound expanded key: users
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Bound expanded keys: general
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Programmatic control
Expand, Collapse and Toggle drive a single item by key,
ExpandAll (multiple-expand mode only) and CollapseAll drive all of them, and
FocusItem puts the keyboard on the header of one. IsExpanded and
GetExpandedKeys read the state back. None of them is turned away by ReadOnly or
Collapsible: what those close off is the way in from the header, not the one the app uses.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Expanded keys:
Content rendering
By default every panel is rendered up front and stays in the DOM.
LazyContent holds the first
render of a panel back until it is opened, so a heavy panel costs nothing until it is asked for, and keeps
it afterwards - whatever state it holds survives a collapse. UnmountOnCollapse goes the other
way and drops the content again on every close, so nothing it holds keeps running behind a closed header.
MaxHeight caps a panel and lets it scroll inside the item rather than growing it; the
scrolling region takes a tab stop of its own so the keyboard can reach it.
LazyContent & UnmountOnCollapse (watch the render timestamps):
MaxHeight:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Transition
TransitionDuration sets the length of the expand/collapse animation of every item in
milliseconds, overriding the duration of the theme; 0 turns it off. A reduced-motion
preference still collapses it to nothing, unless ForceAnimation opts out of that.
No animation (0):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Slowed down (1500):
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Templates
HeaderTemplate replaces the whole header of every item and BodyTemplate its panel,
while TitleTemplate and ExpanderTemplate take the place of only the title and only
the expander, leaving the rest of the header as it is. Each of them receives the item as its context, and an
item that carries a template of its own takes precedence over the one of the list.
HeaderTemplate & BodyTemplate:
The general settings of the application
You are currently not an owner
Filtering has been entirely disabled
TitleTemplate & ExpanderTemplate:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Accessibility
Every header is a button inside a heading, tied to its panel with
aria-controls and
aria-expanded, and every panel is a region named by its own header - the structure the
WAI-ARIA accordion pattern asks for. HeadingLevel puts the headers at the right depth of the
heading outline of the page (3 by default, clamped to 1..6). Navigable, which is on by
default, adds the ArrowUp, ArrowDown, Home and End keys on top of Tab: they move the focus between the
headers without scrolling the page under it, wrap around at both ends - NoNavigationLoop
stops them there instead - and skip the disabled items, while the same keys pressed inside a panel are
left to whatever the panel holds. NoContentRegion drops the landmark role from the panels,
which the authoring practices ask for beyond about six panels that can all be open at once, and
AriaLabel names the list itself. A header that does not name itself - an icon-only
HeaderTemplate - takes a HeaderAriaLabel of its own, which names both the toggle
and the panel it opens.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Printing
A collapsed panel is hidden outright, so a list of them prints as a column of bare headers.
ExpandOnPrint opens every panel for the print stylesheet alone - what is on screen stays
exactly where the reader left it - and lifts the cap of MaxHeight with it, since paper does
not scroll. What is not in the DOM at all cannot be printed by any of this: the panels of a
LazyContent list that were never opened, and every closed panel of a list using
UnmountOnCollapse, still print as bare headers.
Leave these closed and open the print preview of the browser (Ctrl+P): only the first list carries its text onto the page.
Printed with their content:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Printed as bare headers:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Gap & NoBorder
Gap sets the space in pixels between the items - 0 stacks them into one block -
and NoBorder drops the outline of every item and fills it with the secondary background
instead, for a flat list that leans on the surface it sits on.
Gap:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
NoBorder:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Empty content
EmptyContent is what the list draws in place of the items while it has none, so a collection
that is still loading, or one a filter has emptied, says so instead of leaving a blank where a list is
meant to be.
There is nothing to show here yet.
Scroll into view
ScrollIntoViewOnExpand brings the item that has just been expanded into view, so a panel
opened at the bottom of the window is not left off the screen it was opened on. The item is moved as
little as the browser can move it, so nothing happens to one that is already in view, and the scroll is
instant rather than smooth for a reader who has asked for less motion. It covers the ways a single panel opens:
a click on its header, Expand, Toggle and the bound keys - ExpandAll scrolls to nothing, since there is no one panel it opened.
Open the last panels of this box: the list follows them without the box being scrolled by hand.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Color
Background and Border take a BitColorKind and repaint every item of
the list, down to the shades its header takes under the pointer.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
External Icons
ExpanderIcon, ExpandedExpanderIcon and the Icon of an item take a
BitIconInfo rather than the name of a built-in icon, so the list can be dressed in the icons
of any library that draws them from CSS classes. BitIconInfo.Css takes the classes as they
are, while BitIconInfo.Fa and BitIconInfo.Bi spell out the prefixes of
FontAwesome and Bootstrap Icons.
FontAwesome:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Bootstrap:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Size
Size drives the padding of the headers and of the panels and the type scale of every item -
the title, the description, the icons and the text of the panel - so a list can be tuned to how much room
it is given.
Small:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Medium:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Large:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Style & Class
Style and Class dress the root element of the list, while Styles and
Classes reach each part of every item on its own - the header, the title, the expander icon,
the panel and everything between them. Two of their slots are states rather than parts:
ItemExpanded is added to an item only while its panel is open and ItemExpandedIcon
only to its expander icon while it is. An item can also carry a Style and a Class
of its own.
Component's style & class:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Styles & Classes:
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.
RTL
Dir="BitDir.Rtl" mirrors the whole list: the expander icon moves to the other end of the
header and the padding follows the writing direction with it.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.
API
Every parameter, public member, sub-class and enum this component exposes.
BitAccordionList parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| ActionsTemplate | RenderFragment<TItem>? | null | The custom template to render beside the header of each item, outside of the toggle button and of the heading it sits in, so that it can hold its own interactive elements. Used when an item does not provide its own actions. |
| Background | BitColorKind? | null | The color kind of the background of all the accordion items. |
| Border | BitColorKind? | null | The color kind of the border of all the accordion items. |
| BodyTemplate | RenderFragment<TItem>? | null | The custom template to render the body (content) of each item. Used when an item does not provide its own body. |
| ChildContent | RenderFragment? | null | The content of the AccordionList, composed of BitAccordionListOption components. |
| Classes | BitAccordionListClassStyles? | null | Custom CSS classes for different parts of the AccordionList. |
| Collapsible | bool | true | Allows the expanded item to be collapsed again from its own header. Setting it to false keeps one item open at all times: the header of the last expanded item reports itself as aria-disabled and no longer answers the pointer or the keyboard, while the public methods still drive the list. |
| DefaultExpandedKey | string? | null | The default expanded key in single-expand mode (used when ExpandedKey is not set). |
| DefaultExpandedKeys | IEnumerable<string>? | null | The default expanded keys in multiple-expand mode (used when ExpandedKeys is not set). |
| ExpandedExpanderIcon | BitIconInfo? | null | The icon to show in place of the expander icon of all items while they are expanded, using custom CSS classes for external icon libraries. Setting it also turns the rotation of the expander icon off. Can be overridden per item. |
| ExpandedExpanderIconName | string? | null | The name of the icon, from the built-in Fluent UI icons, to show in place of the expander icon of all items while they are expanded. Can be overridden per item. |
| ExpandedKey | string? | null | The expanded key in single-expand mode. (two-way bound) |
| ExpandedKeys | IEnumerable<string>? | null | The expanded keys in multiple-expand mode. (two-way bound) |
| ExpanderIcon | BitIconInfo? | null | The icon to display as the expander of all items using custom CSS classes for external icon libraries. Can be overridden per item. |
| ExpanderIconName | string? | null | The name of the icon to display as the expander of all items from the built-in Fluent UI icons. Can be overridden per item. |
| ExpanderIconPosition | BitIconPosition? | null | The side of the header the expander icon of all the items sits on. The default value is End. |
| ExpanderTemplate | RenderFragment<TItem>? | null | The custom template to render in place of the expander icon of each item, leaving the rest of the header as it is. Used when an item does not provide its own expander template. |
| ExpandOnPrint | bool | false | Opens the panel of every item while the page is being printed, so that a collapsed section is not left out of the paper as a bare header. |
| EmptyContent | RenderFragment? | null | The custom content to render in place of the items when the list has none. A list built from Options or ChildContent only knows it is empty once its options have had their turn to register, so its empty content takes the render after the first; a list built from Items shows it right away. |
| Gap | int? | null | The space (gap) in pixels between the accordion items. |
| HeaderTemplate | RenderFragment<TItem>? | null | The custom template to render the header of each item. Replaces the default Title/Description header. |
| HeadingLevel | int? | null | The heading level (aria-level) reported for the header of every item. The default value is 3, and the value is clamped to the 1..6 range. |
| HideExpanderIcon | bool | false | Removes the expander icon from the header of all the items. Can be overridden per item. |
| Items | IEnumerable<TItem> | [] | The collection of items to render in the AccordionList. |
| LazyContent | bool | false | Delays the first render of the content of each item until it is expanded for the first time. The content stays in the DOM afterwards, so the state it holds survives a collapse. |
| MaxHeight | string? | null | The maximum height of the content of every item (any CSS length), beyond which the content scrolls inside the item instead of growing it. |
| MaxExpanded | int? | null | The greatest number of items that can be expanded at the same time in multiple-expand mode. Expanding one more closes the panel that has been open the longest, so nothing is ever turned away. A value below 1 is no limit at all, the cap applies to ExpandAll and to the default and bound keys as well, and it means nothing outside of Multiple. |
| Multiple | bool | false | Enables the multiple-expand mode in which more than one item can be expanded at the same time. |
| NameSelectors | BitAccordionListNameSelectors<TItem>? | null | Names and selectors of the custom input type properties. |
| Navigable | bool | true | Moves the focus between the headers of the items with the ArrowUp, ArrowDown, Home and End keys, in addition to the Tab key. The navigation wraps around at both ends of the list, skips the disabled items, and leaves the same keys pressed inside a panel to whatever the panel holds. |
| NoBorder | bool | false | Removes the default border of all the accordion items and gives a background color to their body. |
| NoContentRegion | bool | false | Removes the region role from the panel of every item, leaving it a plain container. The WAI-ARIA authoring practices ask for it beyond about six panels that can all be open at the same time. |
| NoExpanderRotation | bool | false | Keeps the expander icon of every item still instead of turning it over when the item is expanded. |
| NoNavigationLoop | bool | false | Stops the keyboard navigation of Navigable at the two ends of the list instead of wrapping it around from the last header to the first and back. The Home and End keys still reach both ends either way. |
| OnCollapse | EventCallback<TItem> | The callback that is called when an item is collapsed. | |
| OnExpand | EventCallback<TItem> | The callback that is called when an item is expanded. | |
| OnItemClick | EventCallback<TItem> | The callback that is called when the header of an item is clicked. | |
| OnToggle | EventCallback<TItem> | The callback that is called when an item is toggled (expanded or collapsed). | |
| OnToggling | EventCallback<BitAccordionListToggleArgs<TItem>> | The callback invoked before an item expands or collapses, letting the change be cancelled. It is awaited, and nothing else toggles the list while it runs. | |
| Options | RenderFragment? | null | Alias of the ChildContent. |
| ReadOnly | bool | false | Leaves every item where it is: the headers keep their colors and their place in the tab order and report themselves as aria-disabled, but they no longer answer the pointer or the keyboard. Can be overridden per item. |
| ScrollIntoViewOnExpand | bool | false | Brings the item that has just been expanded into view, moving it as little as the browser can - so nothing happens to one that is already in view - and instantly rather than smoothly for a reader who has asked for less motion. It covers every way a panel opens: a click, one of the public methods, and the bound keys. |
| Size | BitSize? | null | The size of all the accordion items, which drives the padding of the headers and of the contents and the size of the titles. The default value is Medium. |
| Styles | BitAccordionListClassStyles? | null | Custom CSS styles for different parts of the AccordionList. |
| TitleTemplate | RenderFragment<TItem>? | null | The custom template to render in place of the title of each item, leaving the rest of the header as it is. Used when an item does not provide its own title template. |
| TransitionDuration | int? | null | The duration of the expand/collapse transition of every item in milliseconds, overriding the duration the theme provides. |
| UnmountOnCollapse | bool | false | Removes the content of an item from the DOM while it is collapsed, so that nothing it holds keeps running behind a closed header. |
BitAccordionList public members
| Name | Type | Default value | Description |
|---|---|---|---|
| ExpandAll | Task | Expands all the items (only effective in multiple-expand mode). Disabled items are left as they are, since their headers could not close again what would be opened for them. | |
| CollapseAll | Task | Collapses all the expanded items, the disabled ones included, so that nothing is left open with no way of closing it. | |
| Expand | Task | Expands the item with the provided key. In single-expand mode the currently expanded item is collapsed along the way. Not turned away by IsEnabled, ReadOnly or Collapsible. | |
| Collapse | Task | Collapses the item with the provided key. Not turned away by IsEnabled, ReadOnly or Collapsible. | |
| Toggle | Task | Expands the item with the provided key if it is collapsed and collapses it if it is expanded. | |
| IsExpanded | bool | Reports whether the item with the provided key is currently expanded. | |
| GetExpandedKeys | IReadOnlyList<string> | Returns the keys of the currently expanded items, in the order of the items of the list. | |
| FocusItem | Task | Gives the focus to the header of the item with the provided key. | |
| FocusAsync | Task | Gives the focus to the header of the first item of the list that can take it. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitAccordionListItem properties
The class for the items of the BitAccordionList when using the Items parameter.
| Name | Type | Default value | Description |
|---|---|---|---|
| Actions | RenderFragment<BitAccordionListItem>? | null | The content rendered beside the header of the item, outside of the toggle button and of the heading it sits in. The context value provides the item itself. |
| Class | string? | null | The custom CSS classes of the item. |
| Description | string? | null | A short description rendered in the header of the item. |
| ExpandedExpanderIcon | BitIconInfo? | null | The icon to show in place of the expander icon while the item is expanded, using custom CSS classes for external icon libraries. |
| ExpandedExpanderIconName | string? | null | The name of the icon, from the built-in Fluent UI icons, to show in place of the expander icon while the item is expanded. |
| ExpanderIcon | BitIconInfo? | null | The icon to display as the expander using custom CSS classes for external icon libraries. Takes precedence over ExpanderIconName. |
| ExpanderIconName | string? | null | The name of the icon to display as the expander from the built-in Fluent UI icons. |
| ExpanderTemplate | RenderFragment<BitAccordionListItem>? | null | The custom content to render in place of the expander icon of the item. The context value provides the item itself. |
| Body | RenderFragment<BitAccordionListItem>? | null | The content (body) of the item that is shown when the item is expanded. The context value provides the item itself. |
| HeaderAriaLabel | string? | null | The accessible label of the toggle button in the header of the item, for a header whose own content does not name it. |
| HeaderTemplate | RenderFragment<BitAccordionListItem>? | null | The custom template for the header of the item. The context value provides the item itself. |
| HideExpanderIcon | bool? | null | Removes the expander icon from the header of the item, overriding the value of the AccordionList. |
| Icon | BitIconInfo? | null | The icon to display at the start of the header of the item using custom CSS classes for external icon libraries. Takes precedence over IconName. |
| IconName | string? | null | The name of the icon to display at the start of the header of the item from the built-in Fluent UI icons. |
| IsEnabled | bool | true | Whether or not the item is enabled. |
| IsExpanded | bool | false | Determines whether the item is expanded. This value is also assigned by the component during interactions. |
| Key | string? | null | A unique value to use as the key of the item. A key that is not given is generated from the position of the item. |
| OnClick | Action<BitAccordionListItem>? | null | The click event handler of the header of the item. |
| ReadOnly | bool? | null | Leaves the item where it is: its header keeps its colors and its place in the tab order, but it no longer answers the pointer or the keyboard. Overrides the value of the AccordionList. |
| Style | string? | null | The custom value for the style attribute of the item. |
| Title | string? | null | The title (header text) of the item. |
| TitleTemplate | RenderFragment<BitAccordionListItem>? | null | The custom content to render in place of the Title of the item. The context value provides the item itself. |
BitAccordionListOption properties
The component for the items of the BitAccordionList when using the BitAccordionListOption components.
| Name | Type | Default value | Description |
|---|---|---|---|
| Actions | RenderFragment<BitAccordionListOption>? | null | The content rendered beside the header of the option, outside of the toggle button and of the heading it sits in. The context value provides the option itself. |
| Class | string? | null | The custom CSS classes of the option. |
| Description | string? | null | A short description rendered in the header of the option. |
| ExpandedExpanderIcon | BitIconInfo? | null | The icon to show in place of the expander icon while the option is expanded, using custom CSS classes for external icon libraries. |
| ExpandedExpanderIconName | string? | null | The name of the icon, from the built-in Fluent UI icons, to show in place of the expander icon while the option is expanded. |
| ExpanderIcon | BitIconInfo? | null | The icon to display as the expander using custom CSS classes for external icon libraries. Takes precedence over ExpanderIconName. |
| ExpanderIconName | string? | null | The name of the icon to display as the expander from the built-in Fluent UI icons. |
| ExpanderTemplate | RenderFragment<BitAccordionListOption>? | null | The custom content to render in place of the expander icon of the option. The context value provides the option itself. |
| Body | RenderFragment<BitAccordionListOption>? | null | The content (body) of the option that is shown when the option is expanded. The context value provides the option itself. |
| ChildContent | RenderFragment? | null | The default child content of the option, for simple inline content without context. It takes precedence over Body when both are set. |
| HeaderAriaLabel | string? | null | The accessible label of the toggle button in the header of the option, for a header whose own content does not name it. |
| HeaderTemplate | RenderFragment<BitAccordionListOption>? | null | The custom template for the header of the option. The context value provides the option itself. |
| HideExpanderIcon | bool? | null | Removes the expander icon from the header of the option, overriding the value of the AccordionList. |
| Icon | BitIconInfo? | null | The icon to display at the start of the header of the option using custom CSS classes for external icon libraries. Takes precedence over IconName. |
| IconName | string? | null | The name of the icon to display at the start of the header of the option from the built-in Fluent UI icons. |
| IsEnabled | bool | true | Whether or not the option is enabled. |
| IsExpanded | bool | false | Determines whether the option is initially expanded. |
| Key | string? | null | A unique value to use as the key of the option. A key that is not given is generated by the list, unique among the options. |
| OnClick | EventCallback<BitAccordionListOption> | The click event handler of the header of the option. | |
| ReadOnly | bool? | null | Leaves the option where it is: its header keeps its colors and its place in the tab order, but it no longer answers the pointer or the keyboard. Overrides the value of the AccordionList. |
| Style | string? | null | The custom value for the style attribute of the option. |
| Title | string? | null | The title (header text) of the option. |
| TitleTemplate | RenderFragment<BitAccordionListOption>? | null | The custom content to render in place of the Title of the option. The context value provides the option itself. |
BitAccordionListNameSelectors properties
The names and selectors of the custom input type properties.
| Name | Type | Default value | Description |
|---|---|---|---|
| Actions | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitAccordionListItem.Actions)) | Actions field name and selector of the custom input class. |
| Class | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.Class)) | The CSS Class field name and selector of the custom input class. |
| Description | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.Description)) | Description field name and selector of the custom input class. |
| ExpandedExpanderIcon | BitNameSelectorPair<TItem, BitIconInfo?> | new(nameof(BitAccordionListItem.ExpandedExpanderIcon)) | ExpandedExpanderIcon field name and selector of the custom input class. |
| ExpandedExpanderIconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.ExpandedExpanderIconName)) | ExpandedExpanderIconName field name and selector of the custom input class. |
| ExpanderIcon | BitNameSelectorPair<TItem, BitIconInfo?> | new(nameof(BitAccordionListItem.ExpanderIcon)) | ExpanderIcon field name and selector of the custom input class. |
| ExpanderIconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.ExpanderIconName)) | ExpanderIconName field name and selector of the custom input class. |
| ExpanderTemplate | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitAccordionListItem.ExpanderTemplate)) | ExpanderTemplate field name and selector of the custom input class. |
| Body | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitAccordionListItem.Body)) | Body field name and selector of the custom input class. |
| HeaderAriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.HeaderAriaLabel)) | HeaderAriaLabel field name and selector of the custom input class. |
| HeaderTemplate | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitAccordionListItem.HeaderTemplate)) | HeaderTemplate field name and selector of the custom input class. |
| HideExpanderIcon | BitNameSelectorPair<TItem, bool?> | new(nameof(BitAccordionListItem.HideExpanderIcon)) | HideExpanderIcon field name and selector of the custom input class. |
| Icon | BitNameSelectorPair<TItem, BitIconInfo?> | new(nameof(BitAccordionListItem.Icon)) | Icon field name and selector of the custom input class. |
| IconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.IconName)) | IconName field name and selector of the custom input class. |
| IsEnabled | BitNameSelectorPair<TItem, bool> | new(nameof(BitAccordionListItem.IsEnabled)) | IsEnabled field name and selector of the custom input class. |
| IsExpanded | BitNameSelectorPair<TItem, bool> | new(nameof(BitAccordionListItem.IsExpanded)) | IsExpanded field name and selector of the custom input class. |
| Key | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.Key)) | Key field name and selector of the custom input class. An item that carries no key of its own is given a generated one, kept beside it rather than written into it. |
| OnClick | BitNameSelectorPair<TItem, Action<TItem>?> | new(nameof(BitAccordionListItem.OnClick)) | OnClick field name and selector of the custom input class. |
| ReadOnly | BitNameSelectorPair<TItem, bool?> | new(nameof(BitAccordionListItem.ReadOnly)) | ReadOnly field name and selector of the custom input class. |
| Style | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.Style)) | The CSS Style field name and selector of the custom input class. |
| Title | BitNameSelectorPair<TItem, string?> | new(nameof(BitAccordionListItem.Title)) | Title field name and selector of the custom input class. |
| TitleTemplate | BitNameSelectorPair<TItem, RenderFragment<TItem>?> | new(nameof(BitAccordionListItem.TitleTemplate)) | TitleTemplate field name and selector of the custom input class. |
BitNameSelectorPair properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string | Custom class property name. | |
| Selector | Func<TItem, TProp?>? | Custom class property selector. |
BitAccordionListToggleArgs properties
The arguments of the OnToggling callback of the BitAccordionList.
| Name | Type | Default value | Description |
|---|---|---|---|
| Item | TItem | The item that is about to expand or collapse. | |
| Key | string? | The key of the item that is about to expand or collapse. | |
| IsExpanding | bool | The state the item is about to move to: true while it is expanding, false while it is collapsing. | |
| Reason | BitAccordionToggleReason | What made the item expand or collapse: a click on its header, or a call to one of the public methods. | |
| Cancel | bool | false | Set to true to cancel the expansion or the collapse and leave the item as it is. |
BitAccordionListClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAccordionList. |
| Item | string? | null | Custom CSS classes/styles for each accordion item of the BitAccordionList. |
| ItemExpanded | string? | null | Custom CSS classes/styles for the expanded state of each accordion item of the BitAccordionList. |
| ItemHeaderWrapper | string? | null | Custom CSS classes/styles for the header wrapper of each accordion item, which holds the heading and the actions. |
| ItemHeading | string? | null | Custom CSS classes/styles for the heading element of each accordion item that wraps the header button. |
| ItemHeader | string? | null | Custom CSS classes/styles for the header of each accordion item of the BitAccordionList. |
| ItemIcon | string? | null | Custom CSS classes/styles for the icon at the start of the header of each accordion item. |
| ItemHeaderContent | string? | null | Custom CSS classes/styles for the header content of each accordion item of the BitAccordionList. |
| ItemTitle | string? | null | Custom CSS classes/styles for the title of each accordion item of the BitAccordionList. |
| ItemDescription | string? | null | Custom CSS classes/styles for the description of each accordion item of the BitAccordionList. |
| ItemExpanderIconWrapper | string? | null | Custom CSS classes/styles for the expander icon wrapper of each accordion item of the BitAccordionList. |
| ItemExpanderIcon | string? | null | Custom CSS classes/styles for the expander icon of each accordion item of the BitAccordionList. |
| ItemExpandedIcon | string? | null | Custom CSS classes/styles for the expander icon of each accordion item of the BitAccordionList in the expanded state. |
| ItemActions | string? | null | Custom CSS classes/styles for the actions of each accordion item, rendered beside the header. |
| ItemContentContainer | string? | null | Custom CSS classes/styles for the content container of each accordion item of the BitAccordionList. |
| ItemContentWrapper | string? | null | Custom CSS classes/styles for the content wrapper of each accordion item, which clips the content while it collapses. |
| ItemContent | string? | null | Custom CSS classes/styles for the content of each accordion item of the BitAccordionList. |
BitColorKind enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
BitIconPosition enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | Icon renders before the content. |
| End | 1 | Icon renders after the content (default). |
BitAccordionToggleReason enum
| Name | Value | Description |
|---|---|---|
| Click | 0 | The header of the item was clicked, or activated by the Enter or the Space key. |
| Method | 1 | One of the Expand, Collapse, Toggle, ExpandAll and CollapseAll methods was called. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.