| Name | Type | Default | Description |
|---|
| DataSource | IEnumerable<object> | N/A | Specifies the data source to be loaded and displayed within the Accordion component. This property defines the collection of items or structured data that populates each section or panel of the Accordion, enabling dynamic rendering of its contents. The data source can typically be provided as an array of objects, JSON data, or via a remote endpoint depending on configuration. |
| Disabled | bool | false | Controls whether the accordion component is enabled or disabled. When set to disabled, all interactive functionality is turned off—users cannot expand, collapse, or interact with any accordion sections. Disabled accordions appear visually inactive to indicate their non-interactive state. |
| ExpandedIndexes | int[] | new int[]{} | Sets or retrieves the indexes of currently expanded items. By assigning an array of item indexes to this property, you can programmatically expand those specific items. The maximum number of items that can be expanded at once depends on the value specified in the expandMode property (for example, single or multiple expansion modes). When getting this property, it returns an array of the indexes of all expanded items. |
| ExpandMode | AccordionExpandMode | AccordionExpandMode.SingleFitHeight | Sets or retrieves the current expand mode. The expand mode specifies how list or group items behave when expanding or collapsing—such as allowing multiple items to expand simultaneously or restricting expansion to a single item at a time. |
| UnlockKey | string | "" | Retrieves or assigns the 'unlockKey' property, which serves as the access credential required to unlock and activate the product's full features. |
| Locale | string | "en" | Sets or retrieves the current language code (e.g., "en", "fr") for the component. This property works together with the messages property to determine which language-specific messages or translations are displayed. Use this to localize your application content based on user preference or locale. |
| Messages | object | N/A | Specifies or retrieves an object containing the localized strings used throughout the widget interface. This allows you to define custom translations for various UI elements in different languages. Used together with the locale property to enable localization and internationalization support within the widget. |
| Readonly | bool | false | Indicates whether the element is read-only. When set to true, the element cannot be modified or interacted with by users; its value is fixed and user input is disabled. If false, the element remains editable and interactive. |
| Reorder | bool | false | Controls whether users can reorder accordion items by dragging and dropping them. When enabled, items within the accordion component can be rearranged interactively; when disabled, the order of items remains fixed. |
| RightToLeft | bool | false | Specifies or retrieves a value that determines whether the element is aligned to accommodate right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. This property ensures the element’s layout and text direction are properly adjusted to support RTL localization. |
| Theme | string | "" | Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including aspects such as colors, fonts, and background. |
| Unfocusable | bool | false | Specifies whether the element is capable of receiving keyboard focus, allowing users to navigate to it using the keyboard (such as the Tab key) and interact with it through assistive technologies. |
| Name | Type | Arguments | Description |
|---|
| Collapse | void | int position | Collapses the item located at the specified index, hiding its associated content or details from view. This action typically updates the user interface to indicate that the item is no longer expanded.Args: int position - Index of the item to collapse. |
| Expand | void | int position | Expands the item located at the specified index in the collection, making its detailed content visible or accessible to the user.Args: int position - Index of the item to expand. |
| GetDataSourceAsync() | Task<IEnumerable<object>> | 'N/A' | Gets the "DataSource" property as Task<IEnumerable<object>>. |
| Insert | void | int index, object item | Inserts a new item into the array at the specified index, shifting existing elements to the right to accommodate the new entry. If the specified index is out of range, the operation will either append the item to the end or return an error, depending on the implementation.Args: int index - Index where the new item will be inserted.,object item - Object representing the new item's properties. |
| Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
| RemoveAt | void | int position | Removes the item located at the specified index from the array, shifting subsequent items one position to the left. The array's length is reduced by one, and the removed item is no longer accessible.Args: int position - Index of the item to remove. |
| Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
| SetLocale | void | string locale, object messages | Sets the locale of a component.Args: string locale - The locale abbreviation. For example: 'de'.,object messages - Object containing the locale messages. |
| SetLocale | void | string locale | Sets the locale of a component. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
| Update | void | int index, object settings | Replaces the item at the given index in the collection with an updated version, incorporating the specified new property values while preserving any unchanged properties.Args: int index - Index of the item to update.,object settings - Object containing updated property values for the item. |
| Name | Type | Description | Event Detail |
|---|
| OnCollapse | EventCallback<Event> | Triggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished. | dynamic content- The collapsed item's content., int index- The index of the collapsed item., string label- The label of the collapsed item. |
| Collapsed | event AccordionCollapsedEventHandler | Triggered when an item has completed its collapse animation and is no longer expanded or visible. This event occurs only after the item is fully collapsed, ensuring that any associated transitions or content hiding have finished. | AccordionCollapsedEventArgs |
| OnCollapsing | EventCallback<Event> | Fires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring. | dynamic content- The item content., int index- The item's index., string label- The item's label. |
| Collapsing | event AccordionCollapsingEventHandler | Fires immediately before an item begins its collapse animation, allowing you to perform actions or prevent the collapse from occurring. | AccordionCollapsingEventArgs |
| OnDragEnd | EventCallback<Event> | Triggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend). | dynamic position- Current top and left coordinates of the dragged item., dynamic target- The dragged item element., dynamic content- The dragged item's content., int index- The dragged item's index., string label- The dragged item's label. |
| DragEnded | event AccordionDragEndedEventHandler | Triggered when a user completes a drag-and-drop action to reorder items, indicating that the new order has been finalized and can be processed (e.g., saved or updated in the UI or backend). | AccordionDragEndedEventArgs |
| OnDragStart | EventCallback<Event> | Fires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering. | dynamic position- Initial top and left coordinates of the item being dragged., dynamic target- The item element being dragged., dynamic content- The dragged item's content., int index- The dragged item's index., string label- The dragged item's label. |
| DragStarted | event AccordionDragStartedEventHandler | Fires when the user initiates a drag-and-drop reorder action, signaling the start of an item being moved within a sortable list or container. This event provides an opportunity to perform setup tasks, such as highlighting the item being dragged or preparing the UI for reordering. | AccordionDragStartedEventArgs |
| OnExpand | EventCallback<Event> | Triggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction. | dynamic position- Current top and left coordinates of the expanded item., dynamic target- The expanded item element., dynamic content- The expanded item's content., int index- The expanded item's index., string label- The expanded item's label. |
| Expanded | event AccordionExpandedEventHandler | Triggered when an item has completed its expansion and is fully visible to the user. This event occurs after any expansion animations or transitions have finished, ensuring that the item's contents are now accessible for interaction. | AccordionExpandedEventArgs |
| OnExpanding | EventCallback<Event> | Fires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed. | dynamic content- The content of the item being expanded., int index- The index of the item being expanded., string label- The label of the item being expanded. |
| Expanding | event AccordionExpandingEventHandler | Fires immediately before an item begins its expansion process, allowing you to perform actions or modify data right before the expansion occurs. This event provides an opportunity to prevent the expansion or make adjustments as needed. | AccordionExpandingEventArgs |