Introduction
Custom components support property definitions (propTypes), which enrich a component at the property level. Adding custom properties increases customizability, making the component more flexible and better aligned with business requirements, as shown below:
To manage component properties, click Add Item to add a property, Edit to modify one, or Delete to remove one. Click Edit to view all configuration items for a component property, as shown below.
You can view and configure all custom component property definitions on the Component Preview page (for debugging simple property types) or after installing the component in an app (for complex property configuration, including code-level debugging), as shown below.
Detailed descriptions of each configuration item are provided below.
Property Title
The property title configured for a custom component. The default value is “Property Title”. A clear and intuitive title helps users better understand the property or identify the content they need to enter.
When this component is used on a page, it appears as shown below:
Property Name
The property name of a component is the property Key, similar to props.xxx in a class. The default value is propName. You can bind variables in Page Design to control the component. For example, the property value of a custom component can be used as the title of a component nested within it, as shown below.
Note: The property name of a component cannot be empty; otherwise, an error occurs when the property is called or assigned a value.
Property Type
The property types of a component are similar to common data types. There are seven types: Text, boolean, Number, object, array, Function, and Element. Each data type maps to several setters that meet users’ needs for processing data across different dimensions, as shown below.
Setter
Components with different property types have different setters, which support different rendering and data-processing methods. For example, the Text type corresponds to five setters, as shown below.
Default
The field displayed by default in a custom component when a user opens the form. The effect is shown below.
Enable Variable Binding
Binds variables in Page Design.
Hide
Controls whether the property is hidden. Rarely used.
On Change
Links multiple properties together. Rarely used.
Layout
Provides two options: Block and Inline, which control how the custom component is arranged on the page.
Developer Guide