Skip to content
BlazorUI

Extras

AccordionList

Bit.BlazorUI.ExtrasExpanderList, Expander, Accordion
BitAccordionList is a sugar component over the single-item BitAccordion component. Instead of wiring multiple accordions manually, you provide a list of items and it handles rendering and expand/collapse state for you.

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.

Basic

The items are provided as a list of BitAccordionListItem objects. By default it works in single-expand mode.

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

Enable the Multiple parameter to allow more than one item to be expanded at the same time.

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

Use DefaultExpandedKey (single) or DefaultExpandedKeys (multiple) to set the initially expanded items.


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.

Events

Handle the OnExpand, OnCollapse and OnToggle events of the component.

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

ExpandAll & CollapseAll

In multiple-expand mode, the ExpandAll and CollapseAll public methods can be used.



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.

Binding

Two-way bind the expanded key in single-expand mode using @bind-ExpandedKey.


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.

ExpanderIcon

Customize the expander icon for the whole list or per item.


Component-level:
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.


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.

Background & Border

Customize the background and border color kinds of all the items.


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.


Background & Border:
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

Customize the header and body of the items using HeaderTemplate and BodyTemplate.

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

Customize the appearance using the Style, Class, Styles, and Classes parameters.


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

Use BitAccordionList in right-to-left (RTL).

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAccordionList parameters

Name Type Default value Description
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.
ChildContent RenderFragment? null The content of the AccordionList, composed of BitAccordionListOption components.
Classes BitAccordionListClassStyles? null Custom CSS classes for different parts of the AccordionList.
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).
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.
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.
Items IEnumerable<TItem> [] The collection of items to render in the AccordionList.
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.
NoBorder bool false Removes the default border of all the accordion items and gives a background color to their body.
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).
Options RenderFragment? null Alias of the ChildContent.
Styles BitAccordionListClassStyles? null Custom CSS styles for different parts of the AccordionList.

BitAccordionList public members

Name Type Default value Description
ExpandAll Task Expands all the items (only effective in multiple-expand mode).
CollapseAll Task Collapses all the expanded items.

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
Class string? null The custom CSS classes of the item.
Description string? null A short description rendered in the header of the item.
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.
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.
HeaderTemplate RenderFragment<BitAccordionListItem>? null The custom template for the header of the item. The context value provides the item itself.
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.
OnClick Action<BitAccordionListItem>? null The click event handler of the header of the item.
Style string? null The custom value for the style attribute of the item.
Title string? null The title (header text) of the item.

BitAccordionListOption properties

The component for the items of the BitAccordionList when using the BitAccordionListOption components.

Name Type Default value Description
Class string? null The custom CSS classes of the option.
Description string? null A short description rendered in the header of the option.
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.
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 Alias for the Body parameter (the default child content). Used for simple inline content.
HeaderTemplate RenderFragment<BitAccordionListOption>? null The custom template for the header of the option. The context value provides the option itself.
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.
OnClick EventCallback<BitAccordionListOption> The click event handler of the header of the option.
Style string? null The custom value for the style attribute of the option.
Title string? null The title (header text) of the option.

BitAccordionListNameSelectors properties

The names and selectors of the custom input type properties.

Name Type Default value Description
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.
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.
Body BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitAccordionListItem.Body)) Body 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.
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.
OnClick BitNameSelectorPair<TItem, Action<TItem>?> new(nameof(BitAccordionListItem.OnClick)) OnClick field name and selector of the custom input class.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitAccordionListItem.Style)) 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.

BitNameSelectorPair properties

Name Type Default value Description
Name string Custom class property name.
Selector Func<TItem, TProp?>? Custom class property selector.

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.
ItemHeader string? null Custom CSS classes/styles for the header of each accordion item of the BitAccordionList.
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.
ItemContentContainer string? null Custom CSS classes/styles for the content container of each accordion item of the BitAccordionList.
ItemContent string? null Custom CSS classes/styles for the content of each accordion item of the BitAccordionList.

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.