Icon

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.

(Optional) Add a column component to configure the page layout. For more information, see Horizontal and vertical columns.

In the component list to the left of the canvas, search for Icon and drag the component onto the canvas.

For more information about adding components, see Add Component.

After adding the component, configure its properties in the properties panel on the right. These properties include component name, visibility, opacity, and margin. You can also click the Configure Data Source button to set a data source, and configure parameters such as the icon list field (for example, tiaoshi), icon color (for example, #333333), and icon size (for example, medium).

In the Style tab on the right of the mobile application editor, configure the component's icon using one of the following methods:

• Click the list box to the right of Icon List. In the Icon Library panel, view the icons and their identifiers, and select your desired icon.

• Click Configure Data Source to the right of Data Source, select a data source type, and complete the configuration.

  The available data types are API, Static Data, Application Push, and Page Variable. The returned data must be a string representing the icon's identifier.

  For example, the identifier for is "tiaoshi".

  The component displays an icon by recognizing its identifier in the Icon List.

  If the data source returns a string that is not in the icon list, the page displays an error message.

Click OK.

The component updates in real time according to its associated data source.

In the Style tab on the right of the mobile application editor, set the icon's color and size.

Adjust the component's position on the page. For more information, see General Styles.

In the Interaction tab on the right of the mobile application editor, click Add Interaction, then set the Event and Action.

The component supports Click and Double-click events. For example, you can set the Event to Click and the Action to Show/Hide, then select the component to display. When a user clicks the icon, the specified component's content appears.

For more information, see Interaction Configuration.

Preview and debug the component's data and visual effects. For more information, see Preview and Debug.