DocsICP FilingConsole
官方文档
首页

Text box

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

The text box component lets users enter text, unlike the static text component. For example, you can use it as a search box on a page. This article describes how to configure the text box 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 left.

  3. (Optional) Add column components to set up the layout of your application page. For details, see Horizontal and vertical columns.

  4. In the search box above the component list on the left side of the canvas, enter text box. Find the component and 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 side of the mobile application editor, click Configure Data Source next to Display Data.

  2. On the Data Source Configuration page, configure the data source.

    Available data source types include device, interface, app push, and page variable.

    Note

    Data returned from an interface or device data source must be a string.

  3. Click OK to complete the configuration.

Step 3: Configure styles

  1. In the Style panel on the right side of the mobile application editor, configure the component's appearance.

    Parameter

    Description

    Size

    Sets the size of the text box.

    Placeholder

    Sets the placeholder text that appears before a user enters a value. For example, "Enter device name".

    Character limit

    Sets the maximum number of characters a user can enter. Each Chinese character counts as one character. The minimum value is 1, and the default value is 30.

    Important

    The character limit is a required field.

    Default value

    Sets the default content displayed in the text box.

    Style

    Configures visual styles for the text box, including text color, border color, fill color, and cursor color. You can also set the component to read-only or disabled.

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

Step 4: Configure interactions

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

    This component supports the value change event. For example, you can use the Call Other Services action to call an interface and refresh data when the component's value changes.

    For details, see Interaction configuration.

  2. Preview and debug the component's data and appearance. For details, see Preview and debug.

Previous：TimeNext：Number input