# UI类型介绍
本文介绍DLV支持的控件（组件配置项）。您可以通过gui.json文件中定义的type字段，来定义控件的类型和配置。
 #### 支持的Type类型
Type字段支持以下类型：
- Input：[文本输入框]。
- Number：[数值控件]，支持输入，支持定制最大值、最小值等。
- Select：[下拉选择器]，支持开启过滤和自定义输入。
- Color：[颜色选择器]。
- Checkbox：[勾选框]。
- Slider：[滑动条]。
 
 #### 文本输入框
表1文本输入框参数说明 
| 字段名         | 是否必选 | 参数类型   | 描述         |
|:---|:---|:---|:---|
| placeholder | 否    | String | 值为空时的提示内容。 |
| value       | 是    | String | 文本输入框的值。   |
   
示例如下：
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238832391.png)
```
{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  
  "placeholder": "input value",  
  "value": ""
}
```
 #### 数值控件
数值控件：
表2数值控件参数说明 
| 字段名       | 是否必选 | 参数类型   | 描述                 |
|:---|:---|:---|:---|
| value     | 是    | Number | 数值控件的值，默认为0。       |
| min       | 否    | Number | 可调整的最小值，默认为30000。  |
| max       | 否    | Number | 可调整的最大值，默认为-30000。 |
| precision | 否    | Number | 小数数值保留位置，默认为0。     |
| step      | 否    | Number | 调整数值的大小幅度，默认为1。    |
   
示例如下：
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238826985.png)
```
{
  "label": "Size",  
  "name": "size",  
  "type": "number",  
  "min": 0.1,  
  "max": 1.5,  
  "precision": 1,  
  "step": 0.1,  
  "value": "0.6"
}
```
 #### 下拉选择器
表3下拉选择器参数说明 
| 字段名      | 是否必选 | 参数类型            | 描述                      |
|:---|:---|:---|:---|
| value    | 是    | string          | 下拉选择器选中的值。              |
| data     | 是    | Array\<Object\> | 下拉选择器中包含的所有可选值。         |
| isSearch | 否    | Boolean         | 下拉选择器是否支持搜索功能，默认为false。 |
   
data示例如下：
```
{
  "label": "Layout",  
  "name": "initvalue",  
  "type": "select",  
  "data": [    
    {
      "key": "Center",      
      "value": "center"    
    },    
    {
      "key": "Left",      
      "value": "left"    
    },    
    {
      "key": "Right",      
      "value": "right"    
     }  
   ],  
   "value": "center"
}
```
图1下拉选择器   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238832577.png)
 #### 颜色选择器
表4颜色选择器参数说明 
| 字段名      | 是否必选 | 参数类型    | 描述                            |
|:---|:---|:---|:---|
| value    | 是    | String  | 颜色选择器所选择的值（可为渐变色或echarts颜色值）。 |
| gradient | 否    | Boolean | 是否支持渐变色，默认为true。              |
   
示例如下：
```
{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)"，
  "gradient": true
},
```
图2颜色选择器   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238833147.png)
表5说明 
| 区域编号 | 描述    |
|:---|:---|
| 1    | 支持渐变色 |
   
 #### 勾选框
表6勾选框参数说明 
| 字段名   | 是否必选 | 参数类型    | 含义               |
|:---|:---|:---|:---|
| value | 是    | Boolean | 勾选框的值，true或false |
   
示例如下：
图3勾选框   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238833787.png)
```
{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}
```
 #### 滑动条
表7滑动条参数说明 
| 字段名   | 是否必选 | 参数类型   | 含义              |
|:---|:---|:---|:---|
| value | 是    | Number | 滑动条的值，默认为0。     |
| min   | 否    | Number | 滑动条的最小值，默认为0。   |
| max   | 否    | Number | 滑动条的最大值，默认为100。 |
| step  | 否    | Number | 滑块滚动一格的大小，默认为1。 |
   
示例如下：
图4滑动条   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0238834944.png)
```
{
  "label": "Radius Value",  
  "name": "radius",  
  "type": "slider",  
  "value": 0,  
  "min": 0,  
  "max": 10,  
  "step": 1
}
```