Extras
AccordionList
Bit.BlazorUI.ExtrasExpanderAccordion
A sugar component over BitAccordion: hand it one collection and it
renders an item for each entry and owns which of them are open. Everything an accordion takes is set once for the
list and overridden per item where it matters.
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
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
Items takes a list of BitAccordionListItems, each with a Title, an
optional Description and a Body. One panel is open at a time by default.
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 several panels stay open. MaxExpanded caps them: opening one more
closes the panel open the longest.
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.
MaxExpanded="2":
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 & Collapsible
DefaultExpandedKey and DefaultExpandedKeys pick the panels that start open (a
missing Key is generated from the position, so these set their own).
Collapsible="false" keeps one panel open at all times; its header then reports
aria-disabled.
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.
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="false":
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 every chevron and ExpandedExpanderIconName swaps it while
open; each item can set its own, plus a leading IconName. ExpanderIconPlacement moves
the expander to the start, NoExpanderRotation stops it turning and HideExpanderIcon
removes it.
Per-item icons:
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.
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.
ExpanderIconPlacement:
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.
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 beside each header, outside the toggle button, so it can hold buttons and
menus of its own. An item's own Actions wins over it.
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:
Templates
HeaderTemplate and BodyTemplate replace the whole header and panel;
TitleTemplate and ExpanderTemplate replace only their part. Each gets the item as
its context, and an item's own template wins.
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.
Disabled & Read-only
IsDisabled greys an item out and takes it out of the tab order. ReadOnly
keeps it focusable and in its colors but frozen (aria-disabled), and still raises
OnItemClick. Both work for the whole list or per item.
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 every item that moves,
including the one single-expand mode closes. Each item can also have its own OnClick.
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:
Header clicks: 0
Cancelling a toggle
OnToggling runs before an item moves; set Cancel to keep it where it is, and read
Reason for what asked. It is awaited, so it can confirm or load data first, while the header
reports aria-busy.
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 & methods
@bind-ExpandedKey and @bind-ExpandedKeys hand the open state to the page.
Expand, Collapse, Toggle, ExpandAll (Multiple only),
CollapseAll and FocusItem drive it from code, and are not blocked by
ReadOnly or Collapsible.
@bind-ExpandedKey:
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.
Methods & @bind-ExpandedKeys:
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
Panels render up front by default.
LazyContent renders a panel on its first open and keeps it;
UnmountOnCollapse removes it again on every close. Watch the timestamps.
LazyContent:
UnmountOnCollapse:
MaxHeight & Transition
MaxHeight caps a panel, which then scrolls and takes a tab stop so the keyboard can scroll it.
TransitionDuration sets the animation in milliseconds (0 turns it off); a
reduced-motion preference still wins unless ForceAnimation is set.
MaxHeight="100px":
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.
TransitionDuration="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.
TransitionDuration="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.
Find & print
HiddenUntilFound keeps closed panels searchable: find-in-page opens the item around a match
through the list, so OnToggling sees it with the Reveal reason.
ExpandOnPrint prints every panel open. Content that is not in the DOM (an unopened
LazyContent panel, UnmountOnCollapse) cannot be found or printed.
Search the page (Ctrl+F) for refund or invoice, or open the print preview (Ctrl+P).
Open Settings, choose Security and pick Reset password; the link we email you expires after one hour.
Refunds are issued within 14 days, to the payment method the order was paid with.
Every invoice is listed under Billing, ready to download as a PDF.
Scroll into view
ScrollIntoViewOnExpand scrolls a newly opened item into view - only as far as needed, and
instantly under reduced motion. ExpandAll scrolls to nothing.
Open the last panels: the box follows them.
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.
Joined, Gap & NoBorder
Joined fuses the items into one surface: one shared line between neighbours, rounded outer
corners only. Gap spaces separate items (in pixels), and NoBorder trades the outline
for a filled background.
Joined:
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.
Joined & 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.
Gap="16" & 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 renders while the list has no items.
There is nothing to show here yet.
Accessibility
Each header is a button inside a heading, wired to a region panel as the WAI-ARIA accordion pattern asks.
HeadingLevel sets the level (3 by default). The arrow, Home and End keys move between headers
(Navigable, on by default), wrapping around unless NoNavigationLoop is set.
NoContentRegion drops the region role for long lists, AriaLabel (or an
aria-labelledby) names the list, and an item's HeaderAriaLabel names an icon-only
header.
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.
Cascading parameters
A
BitParams with a BitAccordionListParams sets the defaults of every list inside it;
a list's own parameters win.
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.
Color
Background and Border take a BitColorKind and repaint every item, hover
shades included. A Transparent background on a Joined, NoBorder list
leaves only the lines between the items: a flush list for a FAQ or a sidebar.
Background="Secondary" & Border="Tertiary":
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.
Background="Tertiary" & Border="Transparent":
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.
Flush (Background="Transparent", Joined & 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.
External Icons
ExpanderIcon, ExpandedExpanderIcon and an item's Icon take a
BitIconInfo, for icon libraries such as FontAwesome (BitIconInfo.Fa) and Bootstrap
Icons (BitIconInfo.Bi).
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 scales the padding and the type of every item.
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 list root; Styles and Classes
reach every part of every item, with ItemExpanded and ItemExpandedIcon applied only
while open. The --bit-AccordionList-* and --bit-Accordion-* CSS variables restyle
all the items from one place.
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.
CSS variables:
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.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitAccordionList CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AccordionList-gap | spacing(1) | Space between the items. The Gap parameter wins over it, and a Joined list has none. |
| --bit-AccordionList-divider-color | The items' border color (--bit-clr-brd-pri with NoBorder) | Line between two items of a Joined list. The Border parameter wins over 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. An explicit value wins over --bit-Accordion-background and the header shade variables; left unset, the items take the default fill unless they say otherwise. |
| Border | BitColorKind? | null | The color kind of the border of all the accordion items. An explicit value wins over --bit-Accordion-border-color and, in a Joined list, over --bit-AccordionList-divider-color; left unset, the items take the default border color unless they say otherwise. |
| 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. |
| ExpanderIconPlacement | BitPlacement? | null | The side of the header the expander icon of all the items sits on. The default value is End. Only Start and End are honoured, and they follow the reading direction; any other value leaves the icon at the 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, overriding the --bit-AccordionList-gap CSS variable. Ignored while Joined is on. |
| 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. |
| HiddenUntilFound | bool | false | Hands the collapsed panels to the browser as hidden="until-found", so find-in-page and fragment navigation reach into them and expand the item around the match. The expansion goes through the list (single-expand mode, MaxExpanded, OnToggling with the Reveal reason). Disabled and read-only items are not offered, and LazyContent and UnmountOnCollapse are ignored while it is on. |
| 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. |
| Joined | bool | false | Joins the items into one surface: no gap between them, a single shared line where two of them meet, and rounded corners only at the two ends of the list. Gap is ignored while it is on. |
| 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, or with a modifier, alone. |
| 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. An explicit value wins over the --bit-Accordion-* size variables; left unset, the items are medium unless they say otherwise. |
| 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. Reduced motion collapses it unless ForceAnimation is set. |
| 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 Disabled, ReadOnly or Collapsible. | |
| Collapse | Task | Collapses the item with the provided key. Not turned away by Disabled, 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. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| 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. |
| IsDisabled | bool | false | Whether or not the item is disabled. |
| 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. |
| IsDisabled | bool | false | Whether or not the option is disabled. |
| 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. |
| IsDisabled | BitNameSelectorPair<TItem, bool> | new(nameof(BitAccordionListItem.IsDisabled)) | IsDisabled 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, a call to one of the public methods, or a find-in-page reveal. | |
| 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. |
| ItemSpinner | string? | null | Custom CSS classes/styles for the spinner that stands in the expander's slot of an item while an awaited OnToggling is deciding about it. |
| 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. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
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. |
| Reveal | 2 | Find-in-page or a fragment navigation landed inside the collapsed panel of a HiddenUntilFound list. |
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.