1. 科研云首页
  2. 科研百科

低代码页面如何布局？（低代码页面如何布局出来）

投稿用户 • • 科研百科 • 阅读 75

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

低代码页面如何布局？（低代码页面如何布局出来）

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

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

赞 (0)
投稿用户
上一篇 2024年1月12日 am9:22
下一篇 2024年1月12日 am9:38

相关推荐