AccordionList
ExpanderList
ExpanderList
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
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
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
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. |
| 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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page