UI Types
This section describes the component configuration items supported by DLV. You can use the type field defined in the gui.json file to define types and configurations of components.
Supported Types
The Type field supports the following:
- Input: Text Box.
- Number: Numeric Control. The value can be entered and the maximum and minimum values can be customized.
- Select: Drop-down List. The filtering and custom input are supported.
- Color: Color Selector.
- Checkbox: Check Box.
- Slider: Slider
Text Box
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
placeholder |
No |
String |
Message displayed when the value is empty. |
value |
Yes |
String |
Value in the text box. |
The following provides an example:
1 2 3 4 5 6 7 |
{
"label": "Init value",
"name": "initvalue",
"type": "input",
"placeholder": "input value",
"value": ""
}
|
Numeric Control
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Number |
Value of the numeric control. The default value is 0. |
min |
No |
Number |
The minimum value. The default value is -30,000. |
max |
No |
Number |
The maximum value. The default value is 30,000. |
precision |
No |
Number |
Number of decimal places to be reserved. The default value is 0. |
step |
No |
Number |
Adjustment range. The default value is 1. |
The following provides an example:
1 2 3 4 5 6 7 8 9 10 |
{
"label": "Size",
"name": "size",
"type": "number",
"min": 0.1,
"max": 1.5,
"precision": 1,
"step": 0.1,
"value": "0.6"
}
|
Drop-down List
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
string |
Value selected from the drop-down list. |
data |
Yes |
Array<Object> |
All the optional values contained in the drop-down list. |
isSearch |
No |
Boolean |
Indicates whether the drop-down list supports the search function. The default value is false. |
The following provides a data example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{
"label": "Layout",
"name": "initvalue",
"type": "select",
"data": [
{
"key": "Center",
"value": "center"
},
{
"key": "Left",
"value": "left"
},
{
"key": "Right",
"value": "right"
}
],
"value": "center"
}
|
Color Selector
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
String |
Value selected by the color selector. The value can be a gradient color or an echarts color value. |
gradient |
No |
Boolean |
Indicates whether gradient colors are supported. The default value is true. |
1 2 3 4 5 6 7 |
{
"label": "Color",
"name": "color",
"type": "color",
"value": "rgba(70,94,212,1)",
"gradient": true
},
|
Check Box
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Boolean |
Value of the check box. The value can be true or false. |
The following provides an example:
1 2 3 4 5 6 |
{
"label": "Checked",
"name": "checked",
"type": "checkbox",
"value": true
}
|
Slider
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Number |
Value of the slider. The default value is 0. |
min |
No |
Number |
Minimum value of the slider. The default value is 0. |
max |
No |
Number |
Maximum value of the slider. The default value is 100. |
step |
No |
Number |
Adjustment range. The default value is 1. |
The following provides an example:
1 2 3 4 5 6 7 8 9 |
{
"label": "Radius Value",
"name": "radius",
"type": "slider",
"value": 0,
"min": 0,
"max": 10,
"step": 1
}
|
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot