登录
免费注册
400-6565-277
首页图

新闻动态

news information

低代码提效的秘密!常见的5种低代码布局组件介绍

2023-08-15作者:捷码浏览:

本文将介绍五种布局组件,即流式布局、弹性布局、固定布局、多行多列布局、Layout布局




01

流式布局


流式布局也叫百分比布局,也称非固定像素布局或自适应布局这种布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与响应式布局相补。


什么是响应式布局?

响应式布局指分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,实现不同屏幕分辨率的终端上浏览网页的不同展示方式。


流式布局的常用设计模版如下:


1、左侧固定+右侧自适应


图片



2、左右固定宽度+中间自适应


图片


在捷码中如何使用?

基于Layou布局组件,子组件宽高设置百分比。

图片





02

弹性布局


弹性布局用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,可以与栅格布局结合使用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。


什么是盒状模型?

盒状模型(Box Model)是CSS中用于布局和定位元素的一种模型。它将每个HTML元素看作是一个矩形的盒子,这个盒子由四个部分组成:内容区域(content)、内边距区域(padding)、边框区域(border)和外边距区域(margin)。


在捷码中如何使用?


基于FlexContainer组件使用,使用场景如下:


1、排列方向


决定主轴的方向,可通过此属性改变子元素diplay(即显示方式)。


图片

效果:

图片


2、对齐方式


主轴元素排列(方向),它可能取5个值,具体对齐方式与轴的方向有关,下面假设主轴为从左到右:


图片

效果:

图片


3、换行


默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

效果:

图片





03

固定布局


一般用于浮于元素上方,可任意拖动位置,脱离文档流,生成固定定位的元素,相对于浏览器窗口进行定位,和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)。


图片


什么是文档流?

文档流(Document Flow)是指在HTML文档中元素按照其出现的顺序依次排列的过程。当浏览器解析HTML文档时,会根据元素的标签和属性确定元素在页面中的位置,并根据元素的display属性来确定元素的显示方式。


在捷码中如何使用?


基于FixedContainer、FlexContainer组件使用,适用于在默认(static)定位方式、相对(relative)定位方式、绝对(absolute)定位方式、固定(fixed)定位方式等场景下使用。


图片





04

多行多列布局


多行多列布局本质是使元素浮动从而脱离文档流,结合css的计算属性,可以快速将页面分割成多个布局可以实现静态布局以及自适应布局,可嵌套任意元素。


什么是静态布局?

静态布局是网页最外层容器有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

什么是自适应布局?

自适应布局是指网页或应用程序能够根据不同设备的屏幕尺寸和分辨率自动调整布局和展示效果的一种设计方式。其目的是使用户在不同设备上可以获得更好的用户体验,无论是在桌面电脑、平板还是手机上浏览页面,内容都能以最合适的方式展示。

自适应布局常用设计模版如下:


1、固定宽度和等比布局 


图片


2、等比布局


图片


3、百分比宽度和等比布局

图片


在捷码中如何设置?


基于多行多列布局组件。可以设置固定像素、百分比、数值,其中数字代表该列在剩余待划分区域所占的份数,如果所有项目的值都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的值为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。


图片





05

Layout布局


Layout布局容器,其下可嵌套 Header Sider Content Footer 或 Layout 本身,可以放在任何父容器中。


基本结构:

图片

或:

图片


Layout布局容器主要应用于以下场景:


1、拥有侧边导航,区别是两边未留边距,多用于应用型的网站。

图片


2、拥有顶部导航及侧边栏的页面,多用于展示类网站。

图片


在捷码中如何设置?


基于Layou布局组件设置:


图片




%用户还看了以下内容

智慧水务案例:低代码工具如何助力高效水资源管理? 阅读1000次

低代码案例:捷码助力高效打造定制智慧园区系统! 阅读1001次

低代码开发流程解析:加速应用开发的秘籍 阅读589次

低代码应用案例:提升企业数字化竞争力 阅读861次

快速试用捷码

x