Informat AI Low-Code Docs

English

简体中文

English

简体中文

Appearance

Feature Introduction ​

To make it easier for designers to get started and participate in the entire component design process, the Component Designer provides a friendly visual interaction method. Designers can complete component design without writing code and seamlessly transfer design results to developers, thereby improving overall work efficiency.

Function Section Description ​

Through these function sections, designers can intuitively and conveniently design and configure pages and components, complete an efficient design process without writing code, and seamlessly connect design results to developers

Toolbar ​

Contains commonly used function buttons such as "Save", "Publish", "Refresh", as well as alignment tools, zoom ratio adjustment, undo/redo and other operations, making it convenient for users to quickly adjust and operate the interface. Next, we will introduce the toolbar buttons from left to right in detail

Pointer Tools ​

Supports switching between three pointer modes, which are:

  1. Selection Mode:

    • Mouse Selection: Select elements in the canvas by clicking the left mouse button.
    • Area Multi-selection: Drag the mouse to select an area and multi-select elements.
    • Combined Multi-selection: Hold down the Shift key and click the left mouse button for multi-selection.

  2. Move Canvas:

    • Supports moving the canvas.

  3. Quick Create:

    • After selecting a component from the Component Set, adjust the component size by dragging the left mouse button, and quickly create an element at the pointer position.

Development Tools ​

  1. Refresh:

    • Refresh the canvas and re-render. If the canvas displays abnormally or some operations are not updated, you can refresh through this operation.

  2. Display Settings:

    • Control canvas display content and operation restrictions.
    • Development Mode: After opening, you can directly edit elements in the canvas; after closing, you can only preview.
    • Render Slots and Virtual Containers: When there is no content in the slot, it will also be rendered with placeholders after opening.
    • Disable Event Handling: After opening, event operations bound to elements will not be triggered.
    • Show Position Reference Lines: After opening, reference lines will be displayed in the canvas.
    • Show Component Outlines: After opening, the outlines of components will be displayed in the canvas.
    • Show Ruler Reference Lines: After opening, ruler reference lines will be displayed.
    • Show Grid Layout: After opening, the configured grid settings will be displayed in the canvas.

  3. Preview:

    • Supports clicking to preview in a new browser tab or scanning a QR code with a mobile phone to preview.

  4. Component Code:

    • Click to display the code generated by the currently designed component.

Editing Tools ​

  1. Zoom: Supports clicking to zoom in and out, and also supports using Ctrl/⌘+mouse wheel to control the zoom of the canvas.
  2. Undo/Redo: Supports undoing or redoing historical operations. Undo shortcut: Ctrl/⌘+Z, Redo shortcut: Ctrl/⌘+Shift+Z

View Switches ​

  1. AI: Click to display the AI tool pop-up window. You can generate or modify components through AI
  1. Blueprint: Click to display the blueprint editor, and you can write component logic through blueprints
  1. Style Sheet: Click to display the style sheet editor, and you can write component style code
  1. Script: Click to display the script editor, and you can write script code
  1. Template: Click to display the template editor, and you can modify template code and synchronize it to the canvas
  1. Log: Click to display the log view, showing component compilation logs, running logs, current data, etc.

Project View ​

Displays views such as Settings, Outline, and Data Structure

Settings View ​

Supports viewing and setting component parameters, specifically as follows:

  • File Information: Supports viewing and setting component remarks
  • Component Libraries Used: Supports defining other third-party component libraries referenced by the currently designed component. Such as VantUI, ElementUI, Informat Runtime, and other public components
  • Import: Supports importing resource files such as js, css, and user components
  • Listenable Events: Define the component's event list, and the parent component can listen to defined events and handle them according to business logic
  • Callable Methods: Define the component's method list, and the parent component can call them by obtaining the component instance through $refs
  • Canvas Settings: Set canvas background color, selection box color, reference line color, and snap line color
  • Shortcuts: Explain the shortcut key usage in the Component Designer
  • Page Settings: Page title, page icon, page metadata element definition. For example, metadata definition often used in mobile terminals: <meta name="viewport" content="width=device-width, initial-scale=1" />

Outline View ​

Displays the structure of the current component, supports expanding and collapsing, adjusting component structure, quickly locating components, and performing quick operations such as deleting selected components, clearing styles, and batch modifying styles.

Data Structure ​

Displays the data structure defined by the current component, including:

  • Parameters (props)
  • Data (data)
  • Computed Data (computed)
  • Methods (methods)
  • Listeners (watch)
  • Lifecycle (lifecycle)
  • References (ref)
  • Global Functions (globalFuncs)
  • Filters (filters)

Component Set ​

Contains various predefined basic components and layout components from all imported third-party components. Users can drag and drop required components from the component set to the real-time preview canvas to quickly build page layouts.

Real-time Preview Canvas ​

The main workspace for users to design and edit pages. Users can directly drag, place, and adjust components on the canvas, preview design effects in real-time, and intuitively see the final page layout.

Component Configuration Section ​

Displays detailed properties and setting options for the currently selected component. Users can configure various properties for the selected component here, such as "Structure Identification", "Loop", "Conditional Display", "Event Handling", "Property Settings", etc. The configuration section provides rich customization options to help users fine-tune component behavior and style to meet various design needs.