U-way low-code technology column is a brand-new, technology-based column written by members of U-way technical committee. Based on U-way’s 7-year low-code technology research and development and operation and maintenance achievements, it mainly introduces the technical principles and architecture related to low-code Logic, the purpose is to provide a platform for technical exchange and learning for the majority of operation and maintenance personnel.
The 11th serialization of U-way low-code practice
"Add Components"
▽
I. Overview
Pages are formed by different components based on certain business logic and interaction. As the most basic element in the page, components are divided into atomic components, general components, business components, templates (multiple reusable components with certain business logic encapsulated), etc.
Second, the addition of components
The addition of components is based on routing, that is, the premise of adding components is to have a routing page. The introduction of adding routing is omitted here. For details, please refer to routing creation.
1. Add components from the component library
The component library covers all the components in the platform. By fuzzy searching the components in the component library, you can find the matching component; after finding the component, you can drag the component to the middle of the screen by dragging the component with the mouse. The iframe preview area, the iframe preview area can quickly receive component information and render effects.
ps: Drag and drop the component to the iframe preview area, and keep the check switch on.
2. Add components from the component tree
Adding components from the component tree can only be fuzzy searched by component ID, so it is more suitable for users who are familiar with component IDs. Adding components from the component tree is also more suitable for scenarios that are not suitable for dragging and dropping components, such as dragging to some complex scenes, it is not easy to find the placement of components; or adding some atomic components that are not in the component library , such as div, a tag, etc.
Add common components:
ps: What are the slots of the parent component? You can click on the description document of the parent component to view it. Different component slots have different names and positions; non-container components do not have slots.
Add atomic components:
Atomic components are native HTML elements, such as div, a, span, etc.
At this point, the addition of components is complete.