DocsICP FilingConsole
官方文档
首页

Multiple-select and single-select

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

Mobile visual development provides multiple-select and single-select components that let users select one or more options. This article describes how to configure these components.

Step 1: Add a component

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

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

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

  4. In the search box above the component list, enter multiple-select or single-select and drag the component to the canvas.

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

    After you add a multiple-select component, the properties panel on the right contains the style and interaction configuration tabs. On the style tab, you can set the component's visibility, opacity, margins, width (default: 300), height (default: 40), and data source. In the Multiple-select configuration section, you can disable the component. In the Multiple-select style section, you can configure the direction (horizontal or vertical), selected color, and text color.

Step 2: Configure the data source

  1. In the style panel on the right, find Data Source and click Configure Data Source.

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

    Available data types include API, static data, and App Push.

  3. Click OK.

Step 3: Configure styles

  1. In the style panel on the right, configure the component's appearance.

    Parameter

    Description

    Multiple-select configuration, single-select configuration

    Sets the component's state to disabled.

    When disabled, users cannot make selections in preview mode.

    Multiple-select style, single-select style

    Sets the layout direction, size, selected button color, unselected button color, and text color for the options.

  2. Adjust the component's width, height, and position on the page.

    For more information, see common styles.

Step 4: Configure interactions

  1. Select the component's interaction tab, click Add Interaction, and then set the event and action.

    This component supports value change and click events. For a multiple-select component, the value is a one-dimensional array of the values for the selected labels, such as ["2","4","7"]. For a single-select component, the value is the value of the selected label.

    For more information, see interaction configuration.

  2. In the upper-right corner of the page, click preview to view or debug the component's display data.

Previous：Number inputNext：Carousel