AccordionList
ExpanderList, Expander, Accordion
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.
- On this page