Components-IoT Studio(IoT Studio)-阿里云帮助中心

Add components

In the mobile app editor, click the Components icon on the far left.
Above the component list on the left, find a component by entering its name and drag it onto the canvas.

Alternatively, you can find and add the component directly from the Basic Components list.

Note
You can also expand the component drop-down list to select and add other types of components.

Configure components

In the mobile app editor, select a component to configure it. The following table describes the available functions.

Feature	Description
Data source	These components are configured in the same way as web visual development components. Supported data sources include device, API, application push, page variable, and static data.
Style	Common style: Configure the component name, component visibility, width, height, and layout position. For more information, see the "Common styles" section below. Custom style: Configure the component's unique appearance. Some custom options support data source configuration. For more information, see the "Data sources for options" section below. For more information about custom options, see the documentation for each component under Mobile Visual Development > Components in this documentation.
Interaction	The supported interactions are the same as those for web development components. For more information, see Interaction Configuration.

Common operations

Select a component on the canvas and right-click it to access the following operations:

Select Layer: The editor lists layers from top to bottom, starting with the column that contains the current component.

For example, if you nest a Horizontal Section within a column of a Vertical Section and then add an image component to a column in that Horizontal Section, the layer list is displayed as follows.

The layer list shows Column, Horizontal Section, Vertical-Column, and Vertical Section, which corresponds to the nesting hierarchy from the image component's column to the outermost Vertical Section.
Cut: Cuts the selected component. You can then paste it on other pages within the same application.
Copy: Copies the selected component. You can then paste it on other pages and in other applications under the same account.

Common styles

The following table describes the configuration options for common styles.

Parameter	Description
Component name	Sets the name of the component. The name must be unique within the application.
Component visibility	Sets whether the component is displayed. If hidden, you can use interactions to control when it appears. Supports device, API, and application push data sources. For Text, Indicator Light, Image, and Rectangle components, if you configure the data source as a device, you can only select a property to set the component visibility. In this case, you can also set whether the component is visible when the device is offline. The device data source supports single-precision numbers, double-precision numbers, integers, booleans, and enums. If the data source returns a numeric format, you must use Convert Integer to Boolean or Convert Number to Enum to configure the visibility. Note When using Text, Indicator Light, Image, or Rectangle components in a repeater, if you need to set the component visibility and its visibility when the device is offline based on a device thing model property, the component's data source must be linked to a device. The configuration is as follows: If the repeater's data source is set to device, the data source for component visibility can be set to parent component data source or device. If the repeater's data source is a non-device source, the data source for component visibility must be set to device.
Opacity	Sets the opacity of the component. A value of 0% is fully transparent, and 100% is fully opaque.
Width	Sets the width and height of the component on the page. Note This option is not supported for Text, Button, and Switch components.
Height
Top margin	Sets the distance between the current component and adjacent components or the edge of its parent column. Note The actual distance between a component and the top or bottom edge of its parent column = Top or bottom padding of the parent column + Top or bottom margin of the component.
Bottom margin
Left margin
Right margin

Data sources for options

Some component style options support dynamic data sources, such as device, API, application push, and page variable. The component's appearance updates in real time based on the data from the option's configured source.

The data returned by the source must match the format required by the option.

Parameter	Format
Text level	String. The mapping is as follows: font-size-display-3: Display Title - Large font-size-display-2: Display Title - Medium font-size-display-1: Display Title - Small font-size-headline: Headline font-size-title: Title font-size-subhead: Subhead font-size-body-2: Body - Emphasis font-size-body-1: Body - Regular font-size-caption: Caption font-size-footnote: Footnote
Font size	Single-precision number, double-precision number, or integer.
Line height
font weight	Number. The mapping is as follows: 300: Light 400: Regular 500: Medium 600: Semi-bold 700: Bold
border width	Integer. Valid values: 0 to 100.
border style	Integer. Valid values: 0 to 2. The mapping to line styles (in the same order as the drop-down list) is as follows: 0: Solid 1: Dashed 2: Dotted
Color	JSON format for an RGB color. `{ "r": 255, "g": 255, "b": 255, "a":0 }` Note The `a` property represents color opacity. Valid values: 0 to 1. For the color of a Text component or the fill color of a Rectangle component, the data source must return data in a boolean or enum format. In this case, if you configure the data source as a device, you can only select a property. Supported data formats include single-precision numbers, double-precision numbers, integers, booleans, and enums. You can also set the display color for the component content when the device is offline. If the data format is numeric, you must use Convert Integer to Boolean or Convert Number to Enum to set the colors displayed for different values. Note When using Text and Rectangle components in a repeater, if you need to set the text color and the rectangle fill color based on a device thing model property, as well as their display color when the device is offline, the component's data source must be linked to a device. The configuration is as follows: If the repeater's data source is set to device, the data source for the text color or the rectangle fill color can be set to parent component data source or device. If the repeater's data source is a non-device source, the data source for the text color or the rectangle fill color must be set to device.