微搭低代码从入门到精通07-基础布局组件

news2024/9/29 1:26:17

低码开发不同于传统开发,传统开发我们通常需要编写前端代码和后端代码。前端代码由HTML、CSS和JavaScript组成,后端代码我们通常要用后端语言比如Java来编写接口。

低码开发的特点是可视化开发,在编辑器中通过组件的拖拽来完成页面的编制。如果涉及到调用数据库的,通常使用平台提供的各类方法就可以满足需要。

本篇我们介绍一下低码开发中常见的布局组件的使用方法。

打开应用编辑器,在组件一栏中可以找到我们可以使用的各类布局组件

在这里插入图片描述

常用的布局组件有普通容器、轮播容器和弹窗。普通容器允许我们自由的设置各种布局,比如像预约列表可以有几行几列的效果。可以简单的和我们word中的表格进行类比,word中的表格就分为行和列,而且还可以合并单元格。

轮播容器是一个高频使用的容器,比如我们小程序一开头就出现的图片轮播,就是使用这个容器进行搭建。

而弹窗组件一般会出现在注册页面,告知用户隐私协议,或者平台需要告知用户知道的内容。还有一种场景是电商小程序,在用户将商品加入购物车的时候,通常需要选择商品规格,我们通常将具体的规格放在弹窗里供用户自主选择。

本篇我们重点介绍一下普通容器的用法,实现的场景呢一般我们在首页都会展示各类信息,每类信息都会有一个标题,点击更多还可以查看更多的内容。

要想实现这个场景,先需要搭建组件。我们先往页面中添加一个普通容器,里边添加两个文本组件

在这里插入图片描述

默认普通容器里边的内容是纵向排列的,为了让文本实现横向排列,我们需要设置普通容器的样式。点击右侧属性面板的样式

在这里插入图片描述

我们选择横向排列,布局模式选择横向平分。我们想要的效果是两端对齐,点击CSS,修改样式为space-between

在这里插入图片描述

self {
    display: flex;
    justify-content: space-between;
    flex-direction: row
}

点保存按钮让样式生效

在这里插入图片描述

这样文本的布局模式就变成了两端对齐,我们修改一下文本内容,第一个我们修改成最新推荐,文本格式选择标题h6

在这里插入图片描述

第二个文本内容修改为更多

在这里插入图片描述

现在内容有点挤,我们可以设置普通容器的外边距来解决

在这里插入图片描述

为了让内容有个突出的效果,先设置页面的背景色为灰色

在这里插入图片描述

然后设置普通容器的背景色为白色

在这里插入图片描述

普通容器里边的文本有点挤,我们可以设置普通容器的内边距

在这里插入图片描述

一般我们的页面的各种效果都是使用这种通用组件,通过设置样式来实现。微搭还提供了一些其他的布局容器,用起来总体感觉不是太灵活,还是使用基本布局组件实现比较自由。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/339367.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

莽村李青都看得懂的Vue响应式原理

Vue响应式原理八股文序违背老祖宗的决定将Vue响应式原理公众于世响应式数据(Observe篇)dom更新(Wacther篇)依赖收集八股文序 开篇来一段大家都会背诵的八股文。 某面试官: 请你简要介绍一下Vue的响应式原理。 答&am…

leaflet 读取上传的wkt文件,转换为geojson文件(示例代码056)

第056个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中上传WKT文件,解析wtk文件并转换为geojson,并在地图上显示图片。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式本示例所用的a.wkt示例源代码(共139行)…

AirServer在哪下载?如何免费使用教程

苹果手机投屏到电脑mac是怎么弄?你知道多少?相信大家对苹果手机投屏到电脑mac能在电脑上操作不是很了解,下面就让coco玛奇朵带大家一起了解一下教程。AIrServer是一款ios投屏到mac的专用软件,可将iOS上的音频,视频&…

make的使用及Makefile万能模板

make的使用及Makefile万能模板前言为什么用makemake的使用Makefile万能模板前言 gcc 的编译,是将源码生成可执行程序。 例如: gcc hello.c -o hello源码到可执行程序需要四步处理 硬件——》机器语言——》汇编语言——》 高级语言 1)预处理…

【openGauss实战8】Schema的图文解读

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

Session与Cookie的区别(三)

中场休息 让我们先从比喻回到网络世界里,HTTP 是无状态的,所以每一个 Request 都是不相关的,就像是对小明来说每一位客人都是新的客人一样,他根本不知道谁是谁。 既然你没办法把他们关联,就代表状态这件事情也不存在。…

微搭低代码从入门到精通08-轮播容器

我们上一篇讲解了基础布局组件,讲解了普通容器和文本组件的用法,本篇我们继续介绍布局组件。 小程序中经常会有个功能是轮播图展示的功能,多张图片可以顺序进行切换。我们学习使用轮播容器的时候,先考虑切换的图片从哪来&#xf…

视频连载09 - 这个为生信学习和生信作图打造的开源R教程真香!!!

点击阅读原文跳转完整教案。1 思考题2 R基础2.1 R安装2.2 Rstudio基础2.2.1 Rstudio版本2.2.2 Rstudio安装2.2.3 Rstudio 使用2.3 R基本语法2.3.1 获取帮助文档,查看命令或函数的使用方法、事例或适用范围2.3.2 R中的变量及其初始化2.3.3 变量类型和转换2.3.4 R中矩…

Python-项目实战--贪吃蛇小游戏(1)

1.贪吃蛇游戏规则贪吃蛇游戏规则如下:1.1开始和结束贪吃蛇初始出现在游戏窗口的左上角位置,体长共有3节游戏过程中,一旦蛇头撞到了窗口的边缘或者身体的其他部位,游戏结束游戏过程中,点击游戏窗口的关闭按钮,或者按下ESC键可以直接退出游戏一…

Java高级-常用类-String、Date、Compare、Other

本篇讲解java常用类 String类 String:字符串,使用一对""引起来表示。 String类被声明为final的,不可被继承。 String实现了Serializable接口:表示字符串是支持序列化的。 ​ 实现了Comparable接口:表示String可以比较…

微搭低代码从入门到精通09-数据容器

我们已经用了两篇的篇幅介绍了微搭的布局组件,包括普通容器、文本、图片、轮播容器。 微搭中还有粗粒度的组件,今天介绍的数据容器就是粗粒度的组件。所谓粗粒度的组件,一般包括基础组件、样式还有默认的事件。数据容器一共包含三种分别是数…

vscode sftp从linux服务器下载文件至本地:No such file or dictionary【已解决】

在服务器跑完程序需要下载数据的时候报错: [warn] ENOENT: no such file or directory, open /home/LIST_2080Ti/.ssh/config load /home/LIST_2080Ti/.ssh/config failed 完整报错内容如下: [02-10 08:38:47] [info] config at /home/LIST_2080Ti {&q…

Arm-Linux子系统的互相Notify

前言: Linux下面不同的子系统一个个的组成了整个系统的运行环节,为了让这些子系统能够互相通讯,有一种叫做:notify chain(通知链)的东西。本篇看下。 概括 所谓通知链,有通知,就有执行的地方。比如A子系统通…

无题

(1)风国产化替代?全球化?新一代数字化技术升级?云化(公有云化)?业务线上化?产业互联整合?私有云原生技术可以支撑:国产化替代-新一代数字化技术升…

WPS底层逻辑串讲

文章目录wps页面基本介绍演示文稿功能讲解框架介绍具体功能讲解:1. 另存为2. 输出图片3. 文件打包4. 演示文稿打印5. 文档加密两种方式 ❤文件打开密码 :文档加密--->密码加密--》输入密码即可 ❤文档编辑密码:输出为PDF--->设置即可6.…

【老卫拆书】009期:Vue+Node肩挑全栈!《Node.js+Express+MongoDB+Vue.js全栈开发实战》开箱

今天刚拿到一本新书,叫做《Node.jsExpressMongoDBVue.js全栈开发实战》,做个开箱。 外观 先从外观上讲,这本是全新的未开封的,膜还在。 这本书介绍从技术原理到整合开发实战,以丰富的项目展现全栈开发的一个技巧。 …

ChatGPT如何注册,如何使用(个人版)文末送账号

您好,我是码农飞哥(wei158556),感谢您阅读本文,欢迎一键三连哦。 💪🏻 1. Python基础专栏,基础知识一网打尽,9.9元买不了吃亏,买不了上当。 Python从入门到精…

ES8——Generator函数的使用

babel工具插件下载:npm i --save babel-polyfill 引入:polyfill.js进行转码(es8->es5) 介绍 Generator函数用于生成迭代器 function * (){} yeild: 作用同return类似 {const obj function* () {yield "a";yield 12…

分享! opensource.builders——为您喜爱的应用程序查找开源替代方案

今天和大家分享一个非常有意思的网站, 我们可以从这个网站中找到一些常用软件的开源替代方案, 比如说之前很火Notion, 我们可以找到它的开源替代方案——Appflowy, 并且在 github 上学习部署它的本地版本.好啦, 话不多说, 上地址:网址地址: https://opensource.builders/github…

数据库(三):多版本并发控制MVCC,行锁的衍生版本,记录锁,间隙锁, Next-Key锁(邻键锁)

文章目录前言一、MVCC以及MVCC的缺点1.1 MVCC可以为数据库解决什么问题1.2 MVCC的基本思想1.3 版本号1.4 Undo日志1.5 ReadView1.6 快照读和当前读1.6.1 快照读1.6.2 当前读二、记录锁三、间隙锁四、邻键锁总结前言 一、MVCC以及MVCC的缺点 MVCC,即多版本并发控制…