Momen Docs
Go to Momen
  • Get Started
    • Introduction
    • Quick Start
    • Software Development Process
    • Editor Overview
  • Changelog
    • Latest Product Update
  • Build UI
    • Pages
    • Components
    • Canvas
    • Layout
    • Component - Display
    • Component - Input
    • Component - View
    • Component - List
    • Component - Tab View
    • Component - Select View
    • Component - Conditional View
    • Component - Others
    • Component - Map
    • Custom Component
  • Data
    • Overview
    • Data Model and Database
    • API
    • Variable
    • Parameter
    • Formula and Conditions
  • Actions
    • Overview
    • Request
    • Navigation
    • Actionflow
      • Custom Code
      • Database Trigger
    • AI
      • AI Data Model
      • AI Point
      • Vector Data Storage and Sorting
    • User Actions
    • Component Management
    • App and Page Management
    • Toast Notifications & Modal
    • Payment
    • SSO
    • Share
    • Location
    • File Management
    • QR Code
    • Clipboard
    • Conditional
    • Loop
  • Release and Growth
    • Publish Application
    • Upgrade Project
    • Multiple Clients
    • Permission
    • Log Service
    • SEO
    • Hosting Files
  • My Account and Community
    • My Wallet
    • Promoting Momen
    • Code Component
    • Collaboration
  • Debugging
    • How to Debug in Momen
    • Request Error Reference
  • Tutorial
    • How to Build an AI Needs Analysis Project?
    • How to Set Up Payment with Stripe Plugin?
    • How to Embed an Iframe Component into Your Momen Project?
    • How to Build Your Login Page?
    • How to Convert Momen App to Native Mobile App?
    • How to Build a CMS (MVP Version) in Hours?
    • How to Set a Countdown Timer When Sending a Verification Code
  • Template
    • AI Mental Health Assistant
    • Angry Dietitian
    • AI Help Center
    • AI Knowledge Base
    • SaaS Corporate Site
    • Blog
    • AI Feedback Tool
    • Feedback Tool, a Nod to Canny
    • Portfolio
    • Online Courses, a Nod to Udemy
    • Mobile Auto Repair AI Scheduler
Powered by GitBook
On this page
  • Add Components
  • Component Management
  • Configure Component - Title and ID
  • Configure Component - Design
  • Alignment and Distribution
  • Custom Configuration
  • Position
  • Size
  • Layout
  • Style
  • Animation
  • Text
  • Configure Component - Data
  • Configure Component - Action
  1. Build UI

Components

Add and config components in Momen

PreviousPagesNextCanvas

Last updated 1 day ago

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.

Add Components

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:

  1. System Components

  2. Custom Components

  3. Code Components

You can add components in three ways:

  1. Select the target container and double-click the component to add it.

  2. Drag the desired component into the target container.

  3. Use the following shortcuts to add frequently used components to a page or container-type component:

    Text — T

    Button — B

    Image — I

    View — F

Component Management

Right-click a component to access the management menu with these options:

  1. Copy: Copy the component (⌘ C丨Ctrl C).

  2. Cut: Cut the component (⌘ X丨Ctrl X).

  3. Paste: Place the copied or cut component into the target container (⌘ V丨Ctrl V).

  4. Duplicate: Create a copy of the component at the same level (⌘ D丨Ctrl D).

  5. Select: Use the selected component as a reference to select other content on the same page.

  6. Move: Change the component's hierarchical position.

  7. Rename: Modify the component name (shortcut ⌘ R丨Ctrl R).

  8. Save as "Custom Component": Save the selected component to the "Custom Component" list (⇧ ⌘ K丨Shift Ctrl K).

  9. Create View: Wrap the selected content into a View (⌘ G丨Ctrl G).

  10. Delete: Remove the component.

Configure Component - Title and ID

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.

Configure Component - Design

Alignment and Distribution

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.

  1. Align Left

  2. Align Center Horizontally

  3. Align Right

  4. Align Top

  5. Align Center Vertically

  6. Align Bottom

  7. Distribute Horizontally (requires multiple selections): Outer components remain fixed while inner components are evenly distributed horizontally.

  8. Distribute Vertically (requires multiple selections): Top and bottom components remain fixed while inner components are evenly distributed vertically.

Custom Configuration

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."

Position

Size

Width & Height

Choose from different calculation methods to define the component's size:

  1. PX: Fixed size.

  2. %: Percentage of the parent container’s size.

  3. 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).

  4. 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.

Layout

Applies only to container-type components and pages.

Style

Configures component styles and visual effects.

  1. Opacity: Adjust transparency.

  2. Border Radius: Set corner curvature.

  3. Cursor Style: Change pointer style on hover.

  4. Background Color: Set background color.

  5. Background Image: Use local or remote images.

  6. Border: Configure border color and thickness.

  7. Shadow: Add shadow effects.

    1. X (Horizontal Offset): The position of the shadow in the horizontal direction.

    2. Y (Vertical Offset): The position of the shadow in the vertical direction.

    3. Blur: Control the degree of shadow blur.

    4. Spread: Control the size of the shadow (expand or contract).

  8. Background Blur: Apply blur effects to the background.

Animation

Add animations triggered by specific user interactions.

There are currently four trigger methods for animations.

  1. On Hover: Triggered when hovered over.

  2. On Click: Triggered when clicked.

  3. On Scroll to Component: Triggered when scrolled into view.

  4. On Scroll: Dynamically triggered based on scroll position.

Text

If the selected component contains text, configure text properties in this section.

Configure Component - Data

Configure Component - Action

This section configures the component's position on the page. For detailed guidance, refer to .

Configures the arrangement of components inside a container or page. For more details, see .

Configure the data source for components. Supported for List, Select Views, Table, etc. For details, see .

Define actions triggered by user interactions or events like clicks, refreshes, or List scroll events. For details, see .

Layout and Position
Layout and Position
Data
Action Configuration