更新时间:2022-04-26 GMT+08:00
分享

下拉选择框

下拉选择框组件用于让用户在下拉框中选择某一项内容,单选。由一个输入框和一个下拉弹出框组成。

图1 下拉选择框组件效果图

在设计页面左侧从“全部组件 > 文本”中拖出下拉选择框组件至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

表1 下拉选择框高级设置参数说明

区域

参数名

说明

输入框设置

字体大小

输入框中字体的大小。

字体颜色

输入框中字体的颜色。

背景颜色

输入框中背景的颜色。

边框颜色

默认状态下输入框边框的颜色。

边框聚焦颜色

鼠标选中输入框时,边框的颜色。

边框悬浮颜色

鼠标悬浮在输入框上时,边框的颜色。

占位符

没有输入内容时,展示的文字内容。

示例:请选择

是否禁用

是否禁用该下拉框,禁用后,用户不可选择内容。

下拉弹出框设置

最大高度

下拉弹出框的最大高度。

背景颜色

下拉弹出框的背景色。

字体颜色

下拉弹出框中字体的颜色。

选中态背景颜色

选中某项内容时的背景颜色

选中态字体颜色

选中某项内容时字体的颜色。

鼠标悬浮时背景颜色

鼠标悬浮在某项内容上时的背景颜色。

鼠标悬浮时字体颜色

鼠标悬浮在某项内容上时字体的颜色。

数据源配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    系统预置了“下拉选择数据桥接器”,数据源类型选择“桥接器预置”时,可在“桥接器实例”中选择到该桥接器。这里以静态数据类型数据源为例进行举例说明。静态数据举例如下:

    {
      "resCode": "0",
      "resMsg": "成功",
      "result": {
        "dataValue": [
          {
            "value": "选项1",
            "label": "黄金糕"
          },
          {
            "value": "选项2",
            "label": "双皮奶"
          },
          {
            "value": "选项3",
            "label": "蚵仔煎"
          },
          {
            "value": "选项4",
            "label": "龙须面"
          },
          {
            "value": "选项5",
            "label": "北京烤鸭"
          }
        ]
      }
    }
    表2 数据参数说明

    参数名

    说明

    Value

    具体的选项。

    示例:选项1

    label

    选项内容。

分享:

    相关文档

    相关产品

close