visbar-gui
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i visbar-gui

    DownloadsWeekly Downloads

    23

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    2.73 MB

    Total Files

    50

    Last publish

    Collaborators

    • chensir725