visbar-gui

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