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

This topic describes how to configure component display styles. These styles include position, size, visibility, and opacity.

Style configuration includes universal and component-specific settings. Component-specific settings vary by component. You can edit, copy, and paste styles for multiple components of the same type at once.

The following table describes the common style settings.

Parameter	Description
Distribution or alignment	This feature is not a field but a set of alignment and distribution buttons at the top of the style configuration panel. After you select one or more components, use these buttons to set the distribution and alignment. Options include Distribute Horizontally, Distribute Vertically, Align Left, Align Center, Align Right, Align Top, Align Middle, and Align Bottom.
Position	Sets the component's position on the page. The X and Y values set the component's coordinates, with [0,0] as the origin at the top-left corner of the page. You can adjust these values in 4 px increments to move the component.
Rotation	The angle of clockwise rotation for a component, pivoting around its center point. Note Rotation is supported only for single components or component groups. For chart components, rotation is not supported, except for the Device Management (including the Pro version), Device Properties, Data Analytics, and Dashboard components.
Flip	This function is available as Flip buttons located below the Rotation setting. Select a component or a component group, and then use the buttons to flip it horizontally or vertically. Note The flip function is supported only for single components or component groups.
Size	Sets the component's width (W) and height (H). Note Different components have different minimum and maximum size limits.
Component name	Sets a unique name for the component within the application.
Visibility	Controls whether the component is visible on the page. You can still configure invisible components through Interactions. Component visibility supports configuring a dynamic data source as a device, API, application push, or static data. The data source must return a boolean value. For Text, Image, Rectangle, or Indicator Light components, the data format returned by the data source can be boolean or enumeration. If you configure the data source as Device, you can only select Property. The supported data formats are single-precision numbers, double-precision numbers, integers, boolean, and enumeration. In this case, you can configure the visibility of the component when the device is offline. If the data format of the data source is a numeric type, you must select Convert integer to boolean or Convert number to enumeration, and then set the corresponding visibility.
Opacity	Sets the opacity of the component. The value ranges from 0 to 100, where 0 is fully transparent and 100 is fully opaque.