🌲 Component Tree

The component tree displays the hierarchical relationship of pages and components in a tree structure, an important tool for managing complex interfaces.

3.1 Page Management

Create Page

  1. Click the "+" button at the top of the component tree

Switch Page

  • Click the page switch button to select the page to switch to, then click the page name

Delete Page

  • Click the page switch button to select the page to delete, then click the delete button next to it

Rename Page

  1. Double-click page name
  2. Enter new name
  3. Press Enter to confirm

3.2 Component Hierarchy Display

Tree Structure

  • Parent Component: Container that can contain child components
  • Child Component: Component contained within parent component
  • Indentation Display: Child components are indented to the right, showing hierarchical relationship

3.3 Component Operations

Select Component

  • Single selection: Click component name
  • Selected component will be highlighted in both canvas and component tree

Rename Component

  1. Double-click component name
  2. Enter new name (suggest using meaningful names, like btnSubmit, lblTitle)
  3. Press Enter to confirm

Drag and Reorder

Adjust Order at Same Level 1. Select component 2. Drag to target position 3. Release mouse to complete reordering

Parent-Child Relationship 1. Drag component onto target parent component

Note: - Only container type components can be parent components

Component Operation Menu

Right-click component to popup menu:

  • Copy: Copy selected component
  • Delete: Delete component and all its child components
  • Bring to Front/Send to Back: Adjust component layer
  • Show/Hide: Toggle component visibility
  • Lock/Unlock: Toggle component lock state
  • Create Custom Component: Save as custom component template

Workspace Docs: ← Back to Workspace | Canvas | Components | Tree | Properties | Events | Toolbar | Shortcuts