page component management, core features of page building-Low-Code Development Platform(Mobi)-阿里云帮助中心

This document guides you through building pages on the platform. It explains the categories of page components and how to add them. It also covers operations on selected components, such as changing properties, resizing, repositioning, cloning, deleting, and renaming. Additionally, this document details the undo and redo operations to help you design and adjust pages efficiently.

Component categories

The platform provides a rich component library. You can select the components you need from the following categories:

Component category	Description
Common components	Includes common UI elements, such as text, images, and buttons.
Form components	Used to build forms, such as input boxes, dropdowns, and date pickers.
Button components	Includes buttons and dropdown buttons for various interactive operations.
Display components	Used for information display and visual effects, such as links, profile pictures, and progress bars.
Navigation components	Includes step bars, horizontal navigation, and portrait navigation for page navigation and process guides.
Data components	Used to display and manage data, such as lists and tables.
Container components	Includes containers and multi-view containers for page layout and content organization.
Frame components	Used to create pop-up dialog boxes and slide-out panels, such as modals and drawers.
Chart components	Used for data visualization, such as line charts, pie charts, and column charts.
AI components	Used to integrate artificial intelligence chat features.

Add components

You can add new components to a page in the following ways:

Drag and drop: Select a component from the component library and drag it to the target position on the page canvas.
Clone a component: Select an existing component. You can use the clone feature or the keyboard shortcut Ctrl+D (Windows) or ⌘+D (Mac) to quickly create a copy. The new component appears below the original one.

Operations on selected components

Change component properties

In the properties panel on the right, you can adjust the component's properties, such as text content, style, and events.

Resize and reposition a component

Drag with the mouse: On the page canvas, you can drag the component's edges or corners to change its size. You can also drag the main body of the component to adjust its position coordinates.
Use keyboard shortcuts: You can use the arrow keys ↑, →, ↓, and ← to move the component precisely. You can also use Ctrl + arrow key (Windows) or ⌘ + arrow key (Mac) to adjust the component's size precisely.

Clone a component

After selecting a component, you can use the clone feature or a keyboard shortcut to quickly copy it onto the page.

Delete a component

You can delete unwanted components in the following ways:

Use a keyboard shortcut: Press the Delete key.
Use the properties panel: In the aggregate operations menu in the upper-right corner of the properties panel, select "Delete".

Rename a component

You can double-click the component ID in the properties panel or expand the aggregate operations menu to rename the component ID. Note: Component and variable names must be unique on a single page, but you can reuse them on different pages. Global variable names must be unique across all pages and cannot be the same as any local component or variable names.

Automatic reference updates: If Component A references Component B and you rename Component B, the reference in Component A is automatically updated. This ensures reference accuracy, saves time on manual updates, and improves efficiency.

Example: Assume a button button1 is bound to a click event. The event script sets the content of a text component:

text1.setText('Hello, world!');

If you rename the text component text1 to text2, the button's script automatically updates to:

text2.setText('Hello, world!');

This ensures the script logic remains valid after you rename the component, so you do not need to manually modify the reference.

Undo and redo

During page design, you can use the following methods to undo and redo actions:

Keyboard shortcuts:
- Windows: Ctrl + Z (Undo), Ctrl + Y (Redo)
- Mac: ⌘ + Z (Undo), ⌘ + ⇧ + Z (Redo)
Interface buttons: At the bottom of the page building interface, you can click the Undo and Redo buttons to perform these actions.

While building a page, you can use undo and redo for any operation, such as adding, deleting, or modifying components and their properties. This lets you easily revert or reapply actions, which makes it simple to experiment with and adjust your design.