(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

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

Usage

• Group related UI elements into a single block using elements.
• Name the component clearly for maintainability using displayName.

Sizing & Layout

• Choose arrangement with layout ("vertical" for stacked content, "horizontal" for peers).
• Control inter-item spacing with gapClass and interior space with paddingClass.
  • Use spacing and white space to create clear relationships and group information into content sections.
• Align along both axes using alignItemsClass and justifyContentClass.
• Establish size stability with defaultHeight and permit change with canGrow/canShrink.
• When overflow is likely, keep the footprint stable by enabling internal scrolling via scrollingEnabled.

States & Feedback

• Show and hide a busy state explicitly with showLoader and hideLoader, and size the indicator with loaderSize.

Data-Driven / Conditional Behavior

• Keep layouts stable under changing data using defaultHeight with canGrow or scrollingEnabled.
• Maintain consistent rhythm as content updates using alignItemsClass, justifyContentClass, and gapClass.

Content & Localization

• Document intent for authors with displayName.
• Order elements to match reading order and use gapClass to reinforce grouping.
• Avoid overly long blocks; if needed, split content across multiple Sections while keeping order clear with elements.

Dos & Don’ts

Accessibility

• Provide a perceivable busy state using showLoader/hideLoader with an appropriate loaderSize.
• Maintain predictable reading order via elements and layout.
• Reduce layout shift with defaultHeight plus canGrow/canShrink.
• Preserve loader legibility using loaderCoverBackground.
• Keep alignment predictable with alignItemsClass and justifyContentClass.
• Avoid color-only messaging; use the loader state rather than relying solely on loaderCoverBackground.
• Prevent scroll jank and keep focus context stable by enabling scrollingEnabled when content can overflow.
• Improve readability by applying adequate interior spacing with paddingClass.