文档首页/ 智能数据洞察 DataArts Insight/ 用户指南/ 自定义组件/ 自定义组件开发包说明/ UI类型介绍
更新时间：2024-06-20 GMT+08:00
查看PDF
分享

UI类型介绍

本文介绍自定义组件支持的控件（组件样式配置项）。您可以通过gui.json文件中定义的type字段，来定义控件的类型和配置。

支持的Type类型

Type字段支持以下类型：

文本输入框

表1 文本输入框参数说明

字段名

是否必选

参数类型

描述

value

是

String

文本输入框的值。

示例如下：

1
2
3
4
5
6
7
 
{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  

  "value": ""
}

数值控件

数值控件：

表2 数值控件参数说明

字段名

是否必选

参数类型

描述

value

是

Number

数值控件的值，默认为0。

min

否

Number

可调整的最小值。

max

否

Number

可调整的最大值。

step

否

Number

调整数值的大小幅度，默认为1。
示例如下： 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
{
  "label": "Size",  
  "name": "size",  
  "type": "number",  
  "min": 0.1,  
  "max": 1.5,  

  "step": 1,  
  "value": 14
}

下拉选择器

表3 下拉选择器参数说明

字段名

是否必选

参数类型

描述

value

是

string

下拉选择器选中的值。值对应options中的value。

options

是

Array<Object>

下拉选择器中包含的所有可选值。

data示例如下：

{
  "label": "字体粗细",
  "name": "fontWeight",
  "type": "select",
  "options": [
    {
      "key": "Normal",
      "value": "normal"
    },
    {
      "key": "Bold",
      "value": "bold"
    }
  ],
  "value": "normal"
}

颜色选择器

表4 颜色选择器参数说明

字段名

是否必选

参数类型

描述

value

是

String

颜色选择器所选择的值。
示例如下： 
1
2
3
4
5
6
7
 
{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)"，
  "gradient": true
},

勾选框

表5 勾选框参数说明

字段名

是否必选

参数类型

含义

value

是

Boolean

勾选框的值，true或false。

示例如下：

1
2
3
4
5
6
 
{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}

相关文档