(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Section
Overview
- Section is a container used to organize and group related UI elements.
- It arranges child components using a vertical or horizontal layout.
- It supports internal scrolling when content exceeds the section’s dimensions.
- It provides loading states via a loader with configurable size and cover background.
- It is a fundamental building block for structured page layouts and nested groups.
Specs
Tokens
| Token |
Description |
| displayName |
Display name shown in the structure panel |
| elements |
Child components contained within the section |
| layout |
Arrangement of child elements: vertical or horizontal |
| loaderSize |
Size of the loading indicator: small, medium, large |
| loaderCoverBackground |
Background color of the loader overlay (hex) |
| scrollingEnabled |
Enables internal scrolling when content overflows |
| canShrink |
Allows the section to reduce its size |
| canGrow |
Allows the section to expand beyond default size |
| defaultHeight |
Initial section height (e.g., 300px) |
| gapClass |
Spacing between child elements (row/column classes) |
| alignItemsClass |
Vertical alignment of child elements |
| justifyContentClass |
Horizontal alignment/distribution of child elements |
| paddingClass |
Internal spacing around section content |
| events |
Configures the component events |
| ON_INIT (Events) |
Triggered when the section is initialized |
| ON_DESTROY (Events) |
Triggered when the section is removed from the DOM |
| showLoader |
Programmatically shows the loading indicator |
| hideLoader |
Programmatically hides the loading indicator |
Structure
(Configured in General Properties)
- 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.
(Configured in Visual Properties)
- 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.
- 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.
Styling
(Configured in Visual Properties)
- 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.
- 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.
Actions & Variants
(Configured in Events)
- events - Configures the events that the component can trigger and respond to:
- ON_INIT: Triggered when the section component is initialized. Can be used to perform setup operations like loading initial data.
- ON_DESTROY: Triggered when the section component is removed from the DOM. Useful for cleanup operations when navigating away from a page.
(Configured in Component Methods)
- 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.
Guidelines
- Use spacing and white space to create clear relationships and group information into content sections.
- Group related tasks under section titles to provide context and make interfaces easier to scan.
- Apply the spacing scale consistently across breakpoints (utilities apply from the indicated breakpoint upward).
- When you need to center fixed-width block content, use the provided center class.
Accessibility
[NO DATA AVAILABLE]