DocsICP FilingConsole
官方文档
首页

Card

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

The card component displays key data in a specific UI style, such as device attributes or numerical values returned by an API. This topic describes how to configure the card component.

Step 1: Add the component

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

  2. In the mobile application editor, click the Components icon 组件 on the far left.

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

  4. Above the component list on the left of the canvas, enter Card to find the component. Then, drag the component to the canvas.

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

    After you add the card component, it appears on the canvas and is selected. The Style panel on the right displays its default properties, such as Component Name, Visibility, Opacity, Size, Font Size, Title, Unit, Background Color, and Border. The panel also includes a Configure Data Source button.

Step 2: Configure the data source

  1. In the Style panel on the right, under Display Data, click Configure Data Source.

  2. On the data source configuration page, select a data source type and configure it.

    Available data source types include Device, API, and Application Push.

    Note

    The data returned by the data source must be a single-precision number, a double-precision number, or an integer.

  3. Click OK.

    The data on the card is updated in real time from its data source.

Step 3: Configure the style

  1. In the Style panel on the right, set the card's title, unit, background color, and border style.

    Some style properties support dynamic data sources. For more information, see Data sources for configuration items.

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

Step 4: Configure interactions

  1. On the Interaction tab on the right side of the mobile application editor, click Add Interaction to set an Event and an Action.

    Supported events include Click and Double-click. For example, you can set the Click event on the component to trigger the Refresh Component action, which refreshes a specified component's content.

    For details, see Interaction Configuration.

  2. Preview and debug the data and style of the component. For details, see Preview and Debug.

Previous：IconNext：Progress bar