Dynamic Section is a versatile container component used to organize and group related UI elements. It provides layout capabilities and enables flexible content arrangement with support for scrolling and loading states. Dynamic Sections are fundamental building blocks for creating structured page layouts and grouping related interface elements.
displayName - Sets the display name of the component shown in the structure panel. For example, "CustomerDetails" makes it easier to identify the section's purpose within the UI builder interface.
elements - Defines the child components contained within this section. This array can include any compatible components such as forms, tables, text elements, or even nested sections.
layout - Determines how child elements are arranged within the section. Options include "vertical" (stacked elements) or "horizontal" (side-by-side elements). For example, "horizontal" places form fields in a row rather than stacking them.
loaderSize - Sets the size of the loading indicator when the loader is visible. Options include "small", "medium", and "large". For example, "medium" creates a moderately sized loading indicator suitable for most content areas.
loaderCoverBackground - Defines the background color of the loader overlay using hexadecimal color codes. For example, "#fafafa" creates a light gray semi-transparent background that covers the section content during loading.
scrollingEnabled - Determines whether the section content can be scrolled if it exceeds the section's dimensions. When enabled, a scrollbar appears when content overflows, preventing layout disruption.
canShrink - Controls whether the section can reduce its size to fit smaller content. When enabled, the section will contract to accommodate less content than its default size.
canGrow - Controls whether the section can expand beyond its default size to fit larger content. When enabled, the section will grow to accommodate more content than its default size.
defaultHeight - Sets the initial height of the section before any dynamic resizing. For example, "300px" creates a section with a fixed starting height that may adjust based on canGrow/canShrink settings.
gapClass - Configures the spacing between child elements within the section. For example, {"row": "row-gap-4", "column": "column-gap-2"} creates consistent spacing between elements with more vertical than horizontal spacing.
alignItemsClass - Controls the vertical alignment of child elements within the section. For example, "align-items-center" centers all child elements vertically within the section.
justifyContentClass - Controls the horizontal alignment and distribution of child elements within the section. For example, "justify-content-between" evenly distributes child elements across the section's width with space between them.
paddingClass - Configures internal spacing around the section's content using CSS class naming. For example, "p-4" adds medium padding on all sides, while "pt-2 pb-4" adds small padding at the top and larger padding at the bottom.
showLoader - Programmatically displays the loading indicator over the section content. This action is useful during asynchronous operations to provide visual feedback to users that content is being processed.
hideLoader - Programmatically hides the loading indicator when operations are complete. This action should be called after asynchronous operations finish to restore normal section content visibility.