# UI类型介绍
本文介绍自定义组件支持的控件（组件样式配置项）。您可以通过gui.json文件中定义的type字段，来定义控件的类型和配置。
#### 支持的Type类型
Type字段支持以下类型：
- input：[文本输入框]。
- number：[数值控件]，支持输入，支持定制最大值、最小值等。
- select：[下拉选择器]，支持开启过滤和自定义输入。
- color：[颜色选择器]。
- checkbox：[勾选框]。
 
 #### 文本输入框
表1文本输入框参数说明 
| 字段名   | 是否必选 | 参数类型   | 描述       |
|:---|:---|:---|:---|
| value | 是    | String | 文本输入框的值。 |
   
示例如下：
```
{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  
  "value": ""
}
```
 #### 数值控件
数值控件：
表2数值控件参数说明 
| 字段名   | 是否必选 | 参数类型   | 描述              |
|:---|:---|:---|:---|
| value | 是    | Number | 数值控件的值，默认为0。    |
| min   | 否    | Number | 可调整的最小值。        |
| max   | 否    | Number | 可调整的最大值。        |
| step  | 否    | Number | 调整数值的大小幅度，默认为1。 |
   
示例如下：
```
{
  "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 | 颜色选择器所选择的值。 |
   
示例如下：
```
{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)"，
  "gradient": true
},
```
 #### 勾选框
表5勾选框参数说明 
| 字段名   | 是否必选 | 参数类型    | 含义                |
|:---|:---|:---|:---|
| value | 是    | Boolean | 勾选框的值，true或false。 |
   
示例如下：
```
{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}
```