UI类型介绍

支持的Type类型

Type字段支持以下类型：

• input：文本输入框。
• number：数值控件，支持输入，支持定制最大值、最小值等。
• select：下拉选择器，支持开启过滤和自定义输入。
• color：颜色选择器。
• checkbox：勾选框。

文本输入框

示例如下：

1
2
3
4
5
6
7

{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  

  "value": ""
}

数值控件

数值控件：

 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
}

下拉选择器

data示例如下：

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

颜色选择器

1
2
3
4
5
6
7

{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)"，
  "gradient": true
},

勾选框

示例如下：

1
2
3
4
5
6

{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}