无代码表单流程设计——布局组件（二）

 上一篇我们讲到，无代码流程表单设计器雀书的布局组件——“容器”。容器作为布局组件主要作用有两个：调节字段长度、组件边距等字段布局；容纳一个或多个组件。当然，除了容器，雀书还拥有分栏、选项卡和分隔线等布局元素。今天，我们来了解这几种元素。

 

分栏

分栏其实在上一文中已有提及和用到。

作用：调整组件布局，和容器类似，调整单行内组件比例，及行边距。如图。

 

用法：

1. 点击“分栏”的组件，工作台区域会出现一个集两个区域为一行的容器，这是点击1次的效果。如果对其中一个部分点击锁定，再次点击“分栏”的按钮，则会将锁定是1/2区域再次一分为二。一次类推。

2. 调整边距。使用方法同上一篇的“容器”，点击需要调整的“分栏”组件，在右侧的属性配置一栏的“样式属性”-布局中调整上下左右的边距。

 

优点：布局的比例多样化，课调节；布局边距样式多样化，方便美观。

缺点：与容器的功能有些重复，不过听说后期容器只是调整背景色，在布局上进一步优化。

 

选项卡

选项卡就是tap组件。这么说好像有点抽象。简单来说，我需要设置具体场景，不同场景（填写人）需要不同的表单（组件）收集信息什么的，这时候就可以采用选项卡。

用法：直接点击“选项卡”组件。根据需求，在不同的选项下放置组件，可通过右侧“属性配置”更改选项标题和添加选项。

 

优点：方便不同场景下的表单使用。

 

分隔线

分隔线，线如其名，就是将上下两部分的表单分隔开的线。

 

作用：

1. 分隔表单组成部分；

2. 补充说明分隔线下的内容。因为分隔线的标题是可在右侧“属性配置”一栏编辑的，所以当有需要时，可以通过编辑标题说明内容。如图，把分隔线上移到选项卡上方，更改分隔线上的文字标题为“其他信息”。

 

（PS：可以通过组件右侧的两个黑色的小三角一点组件的位置。）

优点：丰富表单组成和外观设计。