Horizontal and vertical columns-IoT Studio(IoT Studio)-阿里云帮助中心

The horizontal column and vertical column components let you add multiple columns. They act as containers for other components and define the relative layout of components on an application page. This topic describes how to configure these components.

Step 1: Add a component

Create a mobile application. For more information, see Create a mobile application.
In the mobile application editor, click the Components icon on the far left.
Above the component list on the left side of the canvas, enter horizontal column or vertical column to find the component, and then drag it to the canvas in the center.
Note
- You can add only one component to each column.
- You cannot drag the entire column component.
For more information about adding components, see Add a component. After a horizontal column component is added, it defaults to a 3-column layout in the canvas. In the Style panel on the right, you can view and modify the component properties, including Component Visibility, Opacity, number of columns, padding and margin, and the container's Fill Color and Border settings.

Step 2: Configure styles

Select the column component and configure its style in the Style panel on the right side of the mobile application editor.

Note

If you nest a column component within another, use the select layer feature to select the target component.

Parameter	Description
Number of columns	Sets the number of columns. A horizontal column component supports up to 4 columns, while a vertical column component supports up to 99.
margin-top	Sets the vertical distance between the component's outer border and adjacent components.
margin-bottom
padding-top	Sets the vertical distance between the component's border and the inner columns it contains.
padding-bottom
Disable gutter	Select the Disable gutter checkbox to remove the spacing between columns. This option is only available for the horizontal column component.
Container style	Sets the fill color and border style for the column component.

Select a column within the component and configure its style in the Style panel on the right.

Parameter	Description
Relative width	Sets the width of the current column relative to the other columns. This option is only available for the horizontal column component.
Height	Sets the height of the current column.
Alignment	This parameter name is not displayed. The corresponding function icons are located below the height parameter. Sets the alignment of all components within the column relative to the column itself.
margin-top	Sets the distance between the current column and the top and bottom boundaries of its parent column component. Note The total vertical distance between a column and its parent's border = the parent's `padding-top` or `padding-bottom` + the column's `margin-top` or `margin-bottom`.
margin-bottom
padding-top	Sets the distance between the component within the column and the column's top or bottom boundary.
padding-bottom
Container style	Sets the fill color and border style for an individual column.

Click the Save icon in the upper-right corner of the page.
Preview and debug the component's data display and style. For more information, see Preview and debug.