在Lowcoder中,您可以通过简单的拖放操作在画布上添加、布局 UI 组件(下称组件),从而构建出想要的内部应用(下称应用)。 组件是构建应用的元素,它们可以展示来自数据库或 API 调用的数据、触发事件等。
要将组件添加到画布上,首先从右侧组件区中选择该组件,然后将其拖放到画布上任何地方。创建一个应用需要很多不同的组件,可以按照一定规范布局组件,从而得到美观的内部应用。
因为Lowcoder内置了一系列组件自适应碰撞设定,所以在搭建应用时,创建一个复杂美观的布局是相对容易且直观的。如:当添加新的组件时,画布上已经存在的组件会移到一边,为新放入的组件提供空间。
组件可以放置在容器组件中。在实际使用中,可以将服务于相同业务流程的表格、输入框、按钮等其他所有组件包含在布局组件中里面,如下图所示:
将组件放入容器型组件相当于对组件进行了收纳操作,这样应用 UI 界面的布局更加清晰、美观和模块化,整体信息更有条理,用户寻找目标信息会更加方便快捷。如下右图,一些组件被放入一个容器中进行组合、布局,构成了一个用户管理模块。
一般组件的尺寸可以进行任意调整。调整组件尺寸的步骤为,首先选中组件,将光标置于组件左/右边框,待光标变成<-|->,点击并移动光标以更改组件的大小,如下图所示:
对于图表、图片、文件预览等组件,可以用光标拖动四个角或四条边框来控制尺寸。
对于容器组件,有两种尺寸调整方式,可通过属性面板的高度属性来设置为自适应或者固定。自适应指的是容器尺寸会自适应放入其中的组件的尺寸从而调整自己的大小;与自适应模式相对,固定指的是其高度会固定,可以用光标拖动四个角或四条边框来控制容器尺寸。
组件的属性面板样式模块存在一个隐藏属性,当设置该属性的值为 true 或者 false 时可以直接控制组件的隐藏/展示(默认值为 false)。而相对于直接设置,更加常见的做法是通过获得在组件属性输入框编写的 JavaScript 表达式的值有条件地控制该组件的隐藏/展示,例如:让一个开关组件 switch1
来控制一个表格组件 table1
的隐藏/展示,则是先选中 table1
,然后在其隐藏属性输入框中输入 {{switch1.value}}
,这样当您打开/关闭 switch1
就能控制隐藏/展示 table1
。