Common Properties of Components and Materials

Each component and material includes the following common properties: Style - Base setting and Action.

Style

Once you select any component or material, a settings panel will pop up. In this panel, click the Style tab, then expand Base setting. You can flexibly adjust the following parameters: size, position, rotation angle, and opacity, to meet the needs of different scenarios.

Category	Property	Description
Size	Width	The width of the component.
	Height	The height of the component.
Position	X	The distance from the left edge of the canvas. A larger value means further to the right.
	Y	The distance from the top of the canvas. A larger value means a lower position.
Other	Rotation	The angle of rotation (0 ~ 360) around the center point.
	Opacity	The opacity of the component. Larger values mean more opaque (range 0 ~ 100).

Action

After you select any component, a settings window will pop up. Click the Action tab to configure click interaction behaviors, which trigger popups, side drawers, or jump to pages and links.

Property	Description
open view type	iframe dialog Drawer Route Open in current page Open in new page
Link Type	Custom: Enter the link in the input box. (Only available for views other than drawer) Studio: Choose a template in a popup.

When open view type is "drawer"

If open view type is set to drawer, the following properties will appear:

• In Studio, a new template type option will be available, with choices: page, container template.

  • When page is selected, you need to pick a template from the popup.
  • When container template is selected, you need to choose both a container template and a template data source.

• New drawer style properties become available, including:

  Property	Sub-property	Description
  Preview		Whether to support drawer preview.
  Direction		The direction from which the drawer appears.
  Modal dialog		Whether it is a modal dialog.
  Padding		Distance from the content area to the drawer edge.
  Fill	Color	Background fill color of the drawer.
  Stroke	Width	The width of the stroke line.
  	Color	The color of the stroke line.
  	Type	For example: solid line, dashed line, etc.
  Shadow	Shadow type	For example: outer shadow, inner shadow. Details to be supplemented.
  	Parameter	e.g. X/Y offset, blur radius, spread, etc., can be represented as an array.
  	Color	Color of the shadow.