1.2.2 • Published 3 years ago
visbar-gui v1.2.2
Visbar-GUI生成器
生成低代码右侧配置面板,通过物料协议的入参配置,生成对应的配置面板组件.
快速开始:
npm install visbar-gui --save
# 或
yarn add visbar-gui --save
- 项目必须依赖 react, antd基础库,请确认是否安装
/**
* config: 物料协议的配置信息
* onChange: 数据变更时的回调
* value: 值,会根据路径分发给相应的控件(路径为对象的路径, 如 obj.user.name)
*/
<VisbarGUI config={this.state.config}
onChange={this.guiConfigChange}
value={extractDefault({ config: this.state.config, value: this.state.data })}
/>
入参配置
参数名 | 参数描述 | 参数类型 | 默认值 |
---|---|---|---|
config | GUI配置面板的物料配置,根据配置生成面板组件 | any | {} |
value | GUI面板中生成控件的value值 | any | {} |
onChange | GUI面板中的值改变时触发的回调 | (data: any) => any | - |
extensions | GUI面板控件扩展, 可以添加额外的渲染控件 | { key: string: React.ComponentClass | React.FunctionComponent } | - |
静态属性方法
GUI.extensionControl
: 扩展的渲染控件属性,类型同extensions
属性类型, 会在所有的VisbarGUI组件中生效.
GUI.register
: 往GUI.extensionControl
中添加渲染控件的方法,参数同extensions
类型.
物料协议配置描述:
- name: 控件元素的名称,会作为控件的label展示
- node: 控件元素使用的渲染控件,可以为默认内置控件和扩展控件(默认控件见下文)
- children: 控件的子元素,如果当控件时容器控件时才需要存在,否则将打乱控件的渲染
- description: 控件的描述文案,将会做为label的tooltip展示
- default: 控件的默认值
- 其他: 控件的其他属性,如stepper控件的min,max属性等,将原样传递的对应的控件
内置控件:
text
: 渲染文本输入框控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | string | false |
description | 控件描述 | string | false |
stepper
: 渲染数值步进器控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | number | false |
description | 控件描述 | string | false |
min | 最小值 | number | false |
max | 最大值 | number | false |
precision | 数值精度 | number | false |
step | 步长 | number | false |
slider
: 渲染滑动条控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | number | number[] | false |
description | 控件描述 | string | false |
range | 双滑块模式 | boolean | false |
min | 最小值 | number | false |
max | 最大值 | number | false |
step | 步长 | number | false |
select
: 选择框控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | any | false |
description | 控件描述 | string | false |
options | 选项列表 | {label: string, value: any}[] | true |
mode | 多选框模式 | 'multiple' | 'tags' | false |
switch
: 开关控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | boolean | false |
description | 控件描述 | string | false |
radio
: 单选框控件,有默认形式和button形式
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | any | false |
description | 控件描述 | string | false |
type | 控件形式 | 'default' | 'button' | false |
options | 选项列表 | {label: string, value: any}[] | true |
checkbox
: 多选框控件,有默认形式和button形式
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | any[] | false |
description | 控件描述 | string | false |
type | 控件形式 | 'normal' | 'button' | false |
options | 选项列表 | {label: string, value: any}[] | true |
color
: 颜色选择器控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | hex颜色值 | false |
description | 控件描述 | string | false |
codeEditor
: 代码编辑器控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | string | false |
description | 控件描述 | string | false |
language | 编辑器语言 | string | false |
suite
: 可控控件,会在控件前加一个开关,表示控件是否可用
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 默认值 | any | false |
description | 控件描述 | string | false |
nodeTruly | 实际渲染的控件 | string | true |
show | 控制开关的状态 | boolean | false |
group
: 组控件,其子控件在其下拉面板中展示
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
children | 组控件的子元素 | { key: strig: any } | true |
menu
: 菜单控件,展示tab菜单
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
children | 菜单控件的子元素 | { key: strig: any }(一级子控件需要是tab控件) | true |
tab
: 菜单面板控件,需和menu控件结合使用,作为menu控件的子控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
children | 菜单面板控件的子元素 | { key: strig: any } | true |
margin
: 边距编辑控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
default | 边距数据 | top: number, right: number, bottom: number, left: number | false |
array
: 数组对象控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
length | 默认数组长度 | number | false |
activeKey | 默认选中激活的数组项 | number | false |
value | 默认数据值 | any | false |
childItem | 数组对象的每个值的物料渲染配置,形式同tab的children | any | true |
type
: 多类型数据控件
必要属性 | 值描述 | 值类型 | 是否必须 |
---|---|---|---|
type | 当前类型对象 | { key: string: any(渲染的控件); } | true |
defaultType | 默认激活的控件 | string | false |
value | 默认数据值(该默认值会根据其类型映射到具体的控件中) | any | false |
onChange | 数据值改变时的回调 | (data: any) => any | false |
1.2.0
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.0.8
3 years ago
1.1.6
3 years ago
1.0.7
3 years ago
1.1.5
3 years ago
1.0.6
3 years ago
1.1.4
3 years ago
1.0.5
3 years ago
1.2.2
3 years ago
1.1.3
3 years ago
1.0.4
3 years ago
1.2.1
3 years ago
1.1.2
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago