DocsICP FilingConsole
官方文档
首页

Icon

更新时间：
复制 MD 格式
我的收藏

The Icon component provides various icon libraries that you can use in web applications. This topic describes how to configure the Icon component.

Step 1: Add the component

  1. Create a web application. For more information, see Create a web application.

  2. In the web application editor, click the component icon 组件 on the far left.

  3. Above the component list on the left of the canvas, enter icon, find the component, and then drag it onto the canvas.

    For more information about adding components, see Add a component.

Step 2: Configure the data source

  1. In the Style panel on the right, use one of the following methods to set the component's icon.
    • Click the list box to the right of Icon list. In the Icon library panel, view the icons and their identifiers, and select the icon you want to display.
    • To the right of data source, click Configure Data Source, select a data source type, and complete the configuration.

      Available data types are API, static data, application push, and page variable. The returned data must be the icon's string identifier.

      For example, the identifier for 微笑 is "smile".

      If the string returned by the data source is not in the Fusion icon library of the icon list, the page will display an error message.

  2. Click OK.

The component updates the icon in real time based on the data source.

Note If you select an icon from the Icon list and also configure a data source, the data source's value takes precedence.

Step 3: Configure the style

  1. In the Style panel on the right, customize the Icon color.
  2. Optional: Set the icon size by adjusting the W (width) and H (height) values.
    Note The icon scales proportionally to maintain its original aspect ratio and prevent distortion.

  3. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

  1. In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

    This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

    For more information, see Interaction configuration.

  2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.

Previous：Flicker AlarmNext：Pipeline