Graphic component
Mobile visual development provides six graphic components: rectangle, arrow, star, oval, polygon, and triangle. You can use them as backgrounds for content in other components or as building blocks for patterns in various scenarios. They are supported only within a repeater component. This topic details how to configure these components.
Step 1: Add the component
-
In the mobile app editor, add a repeater component. For more information, see Add a repeater component.
-
Double-click the repeater component. Above the component list on the left side of the canvas, enter the name of a graphic component, for example, star. Then, drag the component into a column on the canvas.
After adding the star component, select it. You can then view and modify its style properties in the properties panel on the right. These properties include position, size, component name, opacity, fill color (for example,
#0066FF), border thickness, color, and line style.
Step 2: Configure styles
-
Optional: Configure the graphic styles, such as the fill color, border style, rounded corners for rectangles, or the number of sides for polygons.
Some style properties support a dynamic data source. For more information, see Data sources for configuration items.
-
Adjust the component's final position.
For more information about common style configurations for components, see Common styles.
Step 3: Configure interactions
-
Select the component's interaction tab to configure events and their corresponding actions. For more information, see Interaction configuration.
Graphic components support the click and double-click events. For example, you can configure an action to open a new link when a user clicks the component.
-
Preview and debug the component's data and appearance. For more information, see Preview and debug.