低代码页面如何布局?(低代码页面如何布局出来)

低代码页面如何布局-左右布局。

接下来将为大家展示常规页面布局的一些案例。例如,我已经搭建了一个示例,可以直接查看调试效果。左边是竖状结构,右边是表格,左边可以通过按钮点击控制收起和宽度调整。如何构建这样的布局?

低代码页面如何布局?(低代码页面如何布局出来)

首先将页面清空,然后快速讲解如何构建这样的布局。例如,左边的宽度为300,但左边似乎有点小。可以将标题和文本复制到文本中,而无需单独输入。文本还可以设置字体大小、粗细等样式。只需更改文本大小。电脑的声音可能有些小。现在声音已最大,比刚才好。

在这里,将数组键拖到文本下方,然后将文本复制到右边。因为标题只是标题,所以可以直接使用文本。

低代码页面如何布局?(低代码页面如何布局出来)

然后看一下布局,因为这里还有一个按钮用于控制左边的显示和隐藏。因此,文本需要套一个容器。将文本的宽度更改为自适应,然后找到一个容器,容器可以理解为DRV的概念,相当于DRV的概念。

将其拖入,然后将文本拖到容器中,并设置容器的排版。因为按钮和标题是水平排列的,所以水平排列就好了。可以使用“然后”来完成。

低代码页面如何布局?(低代码页面如何布局出来)

然后再添加一个图标按钮,直接从图标中选择图标。可以使用图标图形、图标组件等组件,它们也会适应内容宽度。图标指令可能需要更大或更小,pass。例如,可以更改颜色,然后选择所需的图标,例如要收起时选择的图标。

实现的效果是,收起时会显示展开图标,因此这里需要两个图标和一个图标。只需将其复制,然后将其拖到前面。这个图标选择的是展开的图标,展开后的图标。然后为两个图标分别添加点击时间,第一个图标名为“收起”,更改名称,第二个图标名为“展开”。

低代码页面如何布局?(低代码页面如何布局出来)

收起时点击时需要做什么?将整个布局的左边第一列的宽度更改为0,这样可以通过介绍计算来控制宽度。

需要哪些参数来设置布局?例如,需要位置信息和第几行、第几列的位置信息,以及宽度是多少?将这些参数写入结果中。例如,我们需要在第一行第一列设置宽度,当点击时,我们希望它的宽度变为0,同时隐藏收起按钮并显示展开按钮。此外,我们还需要进行GS计算和控制逻辑的编写,同样也是第一行第一列,第一列的宽度为300。

低代码页面如何布局?(低代码页面如何布局出来)

·假设宽度为300,根据布局需求进行设置。当点击展开时,我们希望隐藏展开按钮并显示收起按钮。第8个效果是收起展开按钮。

但是这样可能存在问题,因为刚开始时展开按钮默认是展开的,需要将其隐藏,才能达到预期效果。

低代码页面如何布局?(低代码页面如何布局出来)

·例如,在页面右侧添加一个表格。车老师已经演示过表格了,因此我简单地添加了几列并实现了数据模拟。当主场景打开时,我们可以模拟一个漏斗状的数据接口并将其添加到表格中,以查看整体效果。整体效果与布局非常接近。

·希望能够通过拖拽实现两列宽度的调整。在布局组件中打开高级功能并打开宽度调整即可。可以看到中间有一条线,这是实时调整宽度的功能。

低代码页面如何布局?(低代码页面如何布局出来)

这是第一种场景,即搭建和布局常规的综合台页面或PC页面等业务页面。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月13日 下午1:11
下一篇 2024年5月13日 下午1:23

相关推荐