低代码页面如何布局?(低代码页面如何布局设计)
低代码页面如何布局-左右布局。
接下来将为大家展示常规页面布局的一些案例。例如,我已经搭建了一个示例,可以直接查看调试效果。左边是竖状结构,右边是表格,左边可以通过按钮点击控制收起和宽度调整。如何构建这样的布局?
首先将页面清空,然后快速讲解如何构建这样的布局。例如,左边的宽度为300,但左边似乎有点小。可以将标题和文本复制到文本中,而无需单独输入。文本还可以设置字体大小、粗细等样式。只需更改文本大小。电脑的声音可能有些小。现在声音已最大,比刚才好。
在这里,将数组键拖到文本下方,然后将文本复制到右边。因为标题只是标题,所以可以直接使用文本。
然后看一下布局,因为这里还有一个按钮用于控制左边的显示和隐藏。因此,文本需要套一个容器。将文本的宽度更改为自适应,然后找到一个容器,容器可以理解为DRV的概念,相当于DRV的概念。
将其拖入,然后将文本拖到容器中,并设置容器的排版。因为按钮和标题是水平排列的,所以水平排列就好了。可以使用“然后”来完成。
然后再添加一个图标按钮,直接从图标中选择图标。可以使用图标图形、图标组件等组件,它们也会适应内容宽度。图标指令可能需要更大或更小,pass。例如,可以更改颜色,然后选择所需的图标,例如要收起时选择的图标。
实现的效果是,收起时会显示展开图标,因此这里需要两个图标和一个图标。只需将其复制,然后将其拖到前面。这个图标选择的是展开的图标,展开后的图标。然后为两个图标分别添加点击时间,第一个图标名为“收起”,更改名称,第二个图标名为“展开”。
收起时点击时需要做什么?将整个布局的左边第一列的宽度更改为0,这样可以通过介绍计算来控制宽度。
需要哪些参数来设置布局?例如,需要位置信息和第几行、第几列的位置信息,以及宽度是多少?将这些参数写入结果中。例如,我们需要在第一行第一列设置宽度,当点击时,我们希望它的宽度变为0,同时隐藏收起按钮并显示展开按钮。此外,我们还需要进行GS计算和控制逻辑的编写,同样也是第一行第一列,第一列的宽度为300。
·假设宽度为300,根据布局需求进行设置。当点击展开时,我们希望隐藏展开按钮并显示收起按钮。第8个效果是收起展开按钮。
但是这样可能存在问题,因为刚开始时展开按钮默认是展开的,需要将其隐藏,才能达到预期效果。
·例如,在页面右侧添加一个表格。车老师已经演示过表格了,因此我简单地添加了几列并实现了数据模拟。当主场景打开时,我们可以模拟一个漏斗状的数据接口并将其添加到表格中,以查看整体效果。整体效果与布局非常接近。
·希望能够通过拖拽实现两列宽度的调整。在布局组件中打开高级功能并打开宽度调整即可。可以看到中间有一条线,这是实时调整宽度的功能。
这是第一种场景,即搭建和布局常规的综合台页面或PC页面等业务页面。