DocsICP FilingConsole
官方文档
首页

Progress bar

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

The progress bar component displays the current progress of an operation or a device's capacity as a percentage in a linear or circular format. This topic describes how to configure the progress bar component.

Step 1: Add the component

  1. Create a mobile application. For details, 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 lay out your application page. For details, see Horizontal and Vertical Columns.

  4. Above the component list to the left of the canvas, enter Progress Bar in the search box, find the component, and then drag it onto the canvas in the middle.

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

    After you add the component, the Style panel appears on the right. It includes basic properties such as component name, visibility, opacity, dimensions, and margins, as well as an entry for data source configuration. The Basic Configuration section lets you set the Size (Large, Medium, or Small) and Type (Circular or Linear). The Threshold Settings section lets you set the Base Value, First Threshold, and Second Threshold. The Progress Indicator Style section lets you set the background color and the colors for the three intervals.

Step 2: Configure the data source

  1. On the Style panel on the right, click Configure Data Source next to Display Data.

  2. In the Data Source Configuration panel, configure the data source.

    Available data source types are device, API, static data, and app push.

    Note

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

  3. Click OK to complete the configuration.

Step 3: Configure the style

  1. On the Style panel on the right, configure the component's appearance.

    Parameter

    Description

    Basic Configuration

    Sets the size and display type of the component.

    Threshold Settings

    Sets the base value and thresholds for the component.

    Three intervals are supported. You only need to set the first and second thresholds. You can click the help icon 帮助按钮 next to First Threshold to see a description of the interval ranges.

    Progress Indicator Style

    Sets the background color of the component and the colors for the three progress intervals.

  2. Adjust the component's dimensions and its position on the page. For details, see General Styles.

Step 4: Configure interactions

  1. On the Interaction panel on the right, click Add Interaction to set an Event and an Action.

    This component supports the Value Change event. The component value represents the current progress value. For example, when the component value changes, you can trigger the Set Device Property action to send a command to a device and modify one of its property values.

    For details, see Interaction Configuration.

  2. Preview and debug the component's data display and visual effects. For details, see Preview and Debug.

Previous：CardNext：Indicator light