Question

介绍

表单设计器是一款可以“所见即的”式的设计表单的工具。操作很简单，只需要将你需要的组件拖动到页面中即可。

我们支持的组件有很多，具体如下所示

基本使用

如下图所示，只需要将你需要的组件拖动到页面中即可。

配置字段属性

以单行文本为例，配置它的字段属性

标题

用于配置标签的标题，例如我修改成“姓名”就会显示成下面这种效果

宽度

宽度，顾名思义，就是设置组件的宽度，但是就算两个组件的宽度均不大于50%，也无法做到显示在同一行，想要显示在同一行，只能通过布局组件来实现，例如栅格布局组件。

占位内容

即当用户没有输入任何内容时的提示内容，如下图所示

默认值

即默认显示的内容

CSS类名

用于高级的CSS增强，在高级操作手册里有详细讲解

数据绑定Key

即存储到后台的数据key，如果在表单属性里设置了Online表单，就可选择online表单里的字段，否则就只能手动输入。

操作属性

可设置组件的一些属性，例如只读、禁用等

校验

可设置一些校验属性，例如常用的有必填，如果设置了必填，则效果如下

配置表单属性

表单属性用于对当前表单做出一些全局的修改

具体配置如下：

Online表单

可以对接配置的Online表单，只需要下拉选择你要对接的Online表单即可，选择之后会将数据同步到Online表单数据库里

标签对齐方式

可选择文本标签的对齐方式，默认为顶部对齐

表单字段宽度

可以控制表单标签所占的宽度，默认100，最大200，最小0。标签对齐方式为顶部对齐时无效

组件尺寸

可选择组件的尺寸大小，可选值有：medium、small、mini

弹窗宽度

可更改弹窗的宽度，可以在预览界面查看效果

弹窗顶部距离

可更改弹窗的顶部距离，可以在预览界面查看效果

表单内边距

可更改表单的内边距，可以在预览界面查看效果

例如进行如下配置

运行效果如下

JS增强

用于写更高级的全局JS增强，在高级操作手册里有详细讲解

CSS增强

用于写更高级的全局CSS增强，在高级操作手册里有详细讲解

设计移动视图

在表单属性里打开这个开关，就可以看到下图的效果，该视图可以让你在设计移动端表单的时候拥有 所见即的 的体验。