星空|BOS操作|技巧&示例|界面布局|分割容器、面板原创
金蝶云社区-之间
之间
3人赞赏了该文章 377次浏览 未经作者许可,禁止转载编辑于2024年04月10日 16:48:22

分割容器:可以使父级界面分为两部分。

方法:拖入分割容器,设置分割方向,将停靠设为充满。

image.png

分割容器与滚动条

分割容器本身是没有滚动条的,当它停靠设为充满时,会应用父元素的滚动条。例如:页签有滚动条,页签里放了分割容器,则也会显示滚动条。

分割容器与面板

分割容器中的两部分本身都没有滚动条,所以一般会搭配其它具有滚动条属性的控件来使用,例如页签、面板等。即在分割的部分再拖入面板,设为充满。

推荐:比如上半部分放各种字段,下半部分放单据体。则上半部分先放入面板再放字段,下半部分先放入页签再放单据体。防止上半部分因为字段太多无法显示滚动条。

常用搭配:字段&面板,单据体&页签&分割容器

一般需要放字段的地方,都可以先放一个面板,再放入字段。

需要放单据体的地方,可以先放一个页签,再放入单据体。

如何对已有界面进行分割改造?

新页面直接按顺序拖入控件即可,但有时我们需要对已有字段的界面进行改造,该如何进行?

  • 以下图为例,这些字段是直接放在一个页签上的,现在要在这个页签中加一个单据体。即先分割页签,再放入单据体。但还需要对上半部分放入面板,并把这些字段放到面板上。

image.png

  • 直接拖入分割容器,调整方向、停靠、分割位置,先把分割位置调到所有字段下面,把字段都漏出来方便后续调整。(以肉眼能看到分隔位置为主)

image.png

  • 拖入面板到上半部分空白处,调整停靠充满和滚动条,注意此步完成之前不要动其它字段,否则可能会导致字段被面板盖住。

    • 要点1:面板拖到上半部分空白处就属于分割上半部分了

    • 要点2:面板默认是关闭滚动条的,视情况是否需要打开。(如果面板的父元素也有滚动条,则最好不要都打开)

image.png

  • 选中所有字段,按一次键盘上和下键。(目的:将所有字段移动一个像素再恢复,使这些字段都归属于面板,否则这些字段还是属于原控件,会导致这些字段无法选中)(验证:此步可以保存后到前端界面进行验证)

    • 要点:按住CTRL键,再左键点击所有字段,即可选中。

image.png

  • 上一步操作后,可任意调整分割容器的分割位置了。

  • 放入页签控件至下半部分,调整停靠。再拖入单据体至其中一个页签中,调整停靠即可。

 


赞 3