美文网首页
无代码表单流程设计——布局组件(二)

无代码表单流程设计——布局组件(二)

作者: 雀书 | 来源:发表于2020-09-21 18:24 被阅读0次

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

    分栏

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

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

    用法:

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

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

    优点:布局的比例多样化,课调节;布局边距样式多样化,方便美观。

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

    选项卡

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

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

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

    分隔线

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

    作用:

    1. 分隔表单组成部分;

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

    (PS:可以通过组件右侧的两个黑色的小三角一点组件的位置。)

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

    相关文章

      网友评论

          本文标题:无代码表单流程设计——布局组件(二)

          本文链接:https://www.haomeiwen.com/subject/gofbyktx.html