Components
Add and config components in Momen
Last updated
Add and config components in Momen
Last updated
Components are the building blocks of a page. When selected, you can configure them in detail using the “Design,” “Data,” and “Action” tabs in the right sidebar. This document focuses on the "Design" tab, while the configurations for "Data" and "Action" are discussed at the end.
Click the "Add Component" button in the left sidebar to open the component list. You can also quickly access this list using the shortcut key (⌥ C丨Alt C).
Currently, the Editor provides three types of component resources:
System Components
Custom Components
Code Components
You can add components in three ways:
Select the target container and double-click the component to add it.
Drag the desired component into the target container.
Use the following shortcuts to add frequently used components to a page or container-type component:
Text — T
Button — B
Image — I
View — F
Right-click a component to access the management menu with these options:
Copy: Copy the component (⌘ C丨Ctrl C).
Cut: Cut the component (⌘ X丨Ctrl X).
Paste: Place the copied or cut component into the target container (⌘ V丨Ctrl V).
Duplicate: Create a copy of the component at the same level (⌘ D丨Ctrl D).
Select: Use the selected component as a reference to select other content on the same page.
Move: Change the component's hierarchical position.
Rename: Modify the component name (shortcut ⌘ R丨Ctrl R).
Save as "Custom Component": Save the selected component to the "Custom Component" list (⇧ ⌘ K丨Shift Ctrl K).
Create View: Wrap the selected content into a View (⌘ G丨Ctrl G).
Delete: Remove the component.
Title: The title in the right sidebar defaults to the component/page name. Hover over the title to rename it.
Copy ID: Each page and component has a unique ID. Use the "Copy ID" option in the right sidebar to share component information for locating and debugging purposes.
Components with a "relative" layout mode adhere to their parent’s layout rules and are not affected during alignment and distribution.
Alignment options help arrange components on a page. Effects vary depending on whether a single component or multiple components are selected.
Select Single: Align the component relative to its parent container or page.
Select Multiple: Align components relative to each other.
Align Left
Align Center Horizontally
Align Right
Align Top
Align Center Vertically
Align Bottom
Distribute Horizontally (requires multiple selections): Outer components remain fixed while inner components are evenly distributed horizontally.
Distribute Vertically (requires multiple selections): Top and bottom components remain fixed while inner components are evenly distributed vertically.
The first section under "Design" provides configurations unique to the selected component, labeled accordingly. For instance, selecting a List component displays settings such as headers or carousels that are specific to Lists.
Most configuration items in the image apply only to the List component, such as headers, carousels, etc. These configurations do not have general formatting properties and are thus considered "Custom Configuration."
This section configures the component's position on the page. For detailed guidance, refer to Layout and position.
Width & Height
Choose from different calculation methods to define the component's size:
PX: Fixed size.
%: Percentage of the parent container’s size.
Fraction (fr): Proportional allocation of remaining space in CSS Grid layouts.
Depends on the parent's layout direction (e.g., vertical for height, horizontal for width).
Fit: Automatically adjusts size based on internal content.
For percentage or fraction-based dimensions, you can specify minimum and maximum constraints:
Margin & Padding
Margin: Adjusts the space between a component and its surroundings.
Padding: Adjusts the space between the component's content and its edges.
By default, margins can be configured simultaneously for all sides. To configure individual sides, click the style icon.
Applies only to container-type components and pages.
Configures the arrangement of components inside a container or page. For more details, see Layout and Position.
Configures component styles and visual effects.
Opacity: Adjust transparency.
Border Radius: Set corner curvature.
**Cursor Style: Change pointer style on hover.
Background Color: Set background color.
Background Image: Use local or remote images.
Border: Configure border color and thickness.
Shadow: Add shadow effects.
X (Horizontal Offset): The position of the shadow in the horizontal direction.
Y (Vertical Offset): The position of the shadow in the vertical direction.
Blur: Control the degree of shadow blur.
Spread: Control the size of the shadow (expand or contract).
Background Blur: Apply blur effects to the background.
Add animations triggered by specific user interactions.
There are currently four trigger methods for animations.
On Hover: Triggered when hovered over.
On Click: Triggered when clicked.
On Scroll to Component: Triggered when scrolled into view.
On Scroll: Dynamically triggered based on scroll position.
If the selected component contains text, configure text properties in this section.
Configure the data source for components. Supported for List, Select Views, Table, etc. For details, see Data.
Define actions triggered by user interactions or events like clicks, refreshes, or List scroll events. For details, see Action Configuration.
