配置控件
本文主要介绍GUI 控件的使用规范。
基本用法
GUI本质是一套动态表单，通过JSON数据渲染出组件的配置项。GUI有很多的控件类型，通过组合可以构造出任意数据结构。每一个控件都有一个独有的type类型。
以下是一个最基本的配置案例。
config: GuiConfigs = {
width: {
name: '宽度',
type: 'number',
default: 1920,
description: '',
suffix: 'px',
},
height: {
name: '高度',
type: 'number',
default: 1080,
description: '',
suffix: 'px',
},
};
渲染效果如下：
通过上面的GUI配置可以获得如下options：
{
width: 1920,
height: 1080,
}
GUI 的配置主要是用对象数据格式组织的，这样可以有效防止出现重复 key，配置中的key对应options中的key。只要修改了表单控件，options的值就会立即更新（文本输入控件只有移开焦点才会更新）。
控件概览
| 分类 | type | 说明 |
|---|---|---|
| 基础控件 | text | 文本输入框，string 类型。 |
| number | 数字输入框，number 类型。 | |
| select | 下拉选择框，只支持单选。 | |
| combobox | 组合下拉框，支持单选多选搜索等。 | |
| radio | 单选框。 | |
| checkbox | 复选框，array 类型。 | |
| buttonToggle | 按钮开关，支持单选多选，可设置文字、图标、图片。 | |
| switch | 开关，boolean 类型。 | |
| slider | 滑动条，number 类型。 | |
| fill | 颜色控件，支持纯色和渐变。 | |
| hidden | 隐藏输入框，input 类型为 hidden。 | |
| image | 图片上传。 | |
| video | 视频上传。 | |
| codearea | 代码编辑器。 | |
| 组合控件 | group | 组合，object 类型。 |
| inline | 行内组合，object 类型。 | |
| tabs | 标签组，array 类型。 | |
| menu | 菜单，object 类型。 |
说明：有些控件的数据输出格式是一样的，主要是 UI 显示效果不同，例如select 和radio。一般而言，如果 options 的数量小于 5 个，优先选用radio，其它场景两者可以相互替换。
关于具体控件的使用方法，请参见控件详情。