Accent color
# AccordionList
**Also known as:** ExpanderList, Expander, Accordion
## Description
BitAccordionList is an advanced version of the BitAccordion that renders a list of expandable items from a single collection and manages their expand/collapse state.
## 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. |
| 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. |
## 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. |
| 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
basicItems =
[
new()
{
Title = "General settings",
Description = "The general settings of the application",
Body = BodyFor("Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.")
},
new()
{
Title = "Users",
Description = "You are currently not an owner",
Body = BodyFor("Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.")
},
new()
{
Title = "Advanced settings",
Description = "Filtering has been entirely disabled",
Body = BodyFor("In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.")
},
];
private static RenderFragment BodyFor(string? text) => item => builder => builder.AddContent(0, text);
```
\n**Templates**:
```razor
@item.Description
```
```csharp
private readonly List basicItems =
[
new()
{
Title = "General settings",
Description = "The general settings of the application",
Body = BodyFor("Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.")
},
new()
{
Title = "Users",
Description = "You are currently not an owner",
Body = BodyFor("Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.")
},
new()
{
Title = "Advanced settings",
Description = "Filtering has been entirely disabled",
Body = BodyFor("In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.")
},
];
private static RenderFragment BodyFor(string? text) => item => builder => builder.AddContent(0, text);
```
\n**Style & Class**:
```razor
basicItems =
[
new()
{
Title = "General settings",
Description = "The general settings of the application",
Body = BodyFor("Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.")
},
new()
{
Title = "Users",
Description = "You are currently not an owner",
Body = BodyFor("Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.")
},
new()
{
Title = "Advanced settings",
Description = "Filtering has been entirely disabled",
Body = BodyFor("In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken.")
},
];
private static RenderFragment BodyFor(string? text) => item => builder => builder.AddContent(0, text);
```