捷码低代码|FreeContainer 自由布局组件详解

news2024/9/23 15:32:21

背景知识:

1、布局组件:

布局组件是一种用于在用户界面中安排和组织其他组件的组件。它们提供了一种简单的方法来控制和管理页面上组件的位置、大小和层次结构。布局组件可以是容器,可以包含其他组件,并确定它们在界面上的显示方式。常见的布局组件有容器布局组件、网格布局组件、盒子布局组件、边界布局组件、流式布局组件等。

2、容器:

容器是被指定为弹性布局的父元素,它使用 display: flex 或 display: inline-flex 属性来定义。容器中的子元素会根据容器的规则进行布局。

FreeContainer组件是一个综合性的布局组件,可以使用该组件进行纵向和横向的布局操作,并且提供纵向和横向动态增加布局,更加高效的方式完成布局一致的模块。

一、如何使用

1、登陆捷码

没有账号的,点击获得免费账号:http://dev.gemcoder.com/front/development/index.html#/officialLogin?jm=cmVnaXN0ZXI9dHJ1ZQ%3D%3D

2、创建应用、页面

3、找到FreeContainer组件,拖放到页面位置

4、选择布局方式(默认为弹性布局),拖入其他组件

二、组件属性

FreeContainer 组件的属性有:

三、应用场景——对组件进行自由布局

1、对容器内组件进行纵向或横向布局

效果:

 配置:

2、 设置容器内文本组件换行

效果:

配置:

3、设置容器内部行列间距

效果:

配置:

4、行方向排列有5种排列方式控制容器内容的水平位置/控制列的对齐方式

效果:行

效果:列

配置:

  

5、改变样式背景

效果:

 设置:

 6、与其它组件协同使用

用于在同级添加列布局一致的FreeContainer组件

效果:

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

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

相关文章

【MyBatis】 框架原理

目录 10.3【MyBatis】 框架原理 10.3.1 【MyBatis】 整体架构 10.3.2 【MyBatis】 运行原理 10.4 【MyBatis】 核心组件的生命周期 10.4.1 SqlSessionFactoryBuilder 10.4.2 SqlSessionFactory 10.4.3 SqlSession 10.4.4 Mapper Instances 与 Hibernate 框架相比&#…

深入理解MVVM架构模式

MVVM原理 MVVM是一种用于构建用户界面的软件架构模式,它的名称代表着三个组成部分:Model(模型)、View(视图)和ViewModel(视图模型)。MVVM的主要目标是将应用程序的UI与其底层数据模…

SERDES关键技术

目录 一、SERDES介绍 二、SERDES关键技术 2.1 多重相位技术 2.2 线路编解码技术 2.2.1 8B/10B编解码 2.2.2 控制字符(Control Characters) 2.2.3 Comma检测 2.2.4 扰码(Scrambling) 2.2.5 4B/5B与64B/66B编解码技术 2.3 包传…

Halcon学习之一维测量实战之测量矩形(一)

一、采集图像 (1)测量充电器 测量充电器的引脚,然后每次旋转充电器,让测量矩形都跟着它转,这就是定位+测量, (2)测量钥匙 (3)测量瓶盖 我们后面还会涉及到拟合的问

牛客网Verilog刷题——VL53

牛客网Verilog刷题——VL53 题目答案 题目 设计一个单端口RAM,它有: 写接口,读接口,地址接口,时钟接口和复位;存储宽度是4位,深度128。注意rst为低电平复位。模块的接口示意图如下。 输入输出描…

HDFS的QJM方案

Quorum Journal Manager仲裁日志管理器 介绍主备切换,脑裂问题解决---ZKFailoverController(zkfc)主备切换,脑裂问题解决-- Fencing(隔离)机制主备数据状态同步问题解决 HA集群搭建集群基础环境准备HA集群规…

解决git仓库无效问题

解决fatal: … not valid: is this a git repository?问题 凭证编辑修改成自己的账号密码即可解决

2023年第四届“华数杯”数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集身份认证…

LEARNING TO EXPLORE USING ACTIVE NEURAL SLAM 论文阅读

论文信息 题目:LEARNING TO EXPLORE USING ACTIVE NEURAL SLAM 作者:Devendra Singh Chaplot, Dhiraj Gandhi 项目地址:https://devendrachaplot.github.io/projects/Neural-SLAM 代码地址:https://github.com/devendrachaplot/N…

python 统计所有的 仓库 提交者的提交次数

字典去重 YYDS 然后再写入excel 表 yyds #!/bin/env python3 from git.repo import Repo import os import pandas as pdspath "/home/labstation/workqueue/sw" url "git10.0.128.128" date [str(x) for x in range(202307, 202308)] datefmt "%…

用html+javascript打造公文一键排版系统11:改进单一附件说明排版

一、用htmljavascript打造公文一键排版系统10中的一个bug 在 用htmljavascript打造公文一键排版系统10:单一附件说明排版 中,我们对附件说明的排版函数是: function setAtttDescFmt(p) {var t p;var a ;if (-1 ! t.indexOf(:))//是半角冒…

SQL注入之sqlmap

SQL注入之sqlmap 6.1 SQL注入之sqlmap安装 sqlmap简介: sqlmap是一个自动化的SQL注入工具,其主要功能是扫描,发现并利用给定的URL的SQL注入漏洞,目前支持的数据库是MS-SQL,MYSQL,ORACLE和POSTGRESQL。SQLMAP采用四种独特的SQL注…

Moonbeam:开发者的多链教科书

了解波卡的技术架构,只需掌握3个关键词: Relay Chain(中继链):Polkadot将自身视作多核计算机,承载区块链底层安全架构的辐射中心。Parachain(平行链):在“Layer 0”架构…

现货白银投资中的头寸是什么

头寸是现货白银市场上的一个投资术语。建立头寸就是建仓的意思,投资者所持有的头寸也叫敞口。投资如果看涨做多,就是持有多头头寸,如果看跌做空,就持有空头头寸。计算交易的头寸的大小并不复杂,关键是在于投资者要设定…

Linux(New)---历史与虚拟机安装CentOS7.6

前言 其实之前已经学过一遍Linux了,但是感觉学的不够深入和成体系(某节的教学视频不完整),所以这次打算完整的跟一遍韩顺平老师的Linux课程,Linux从入门到精通,就从现在开始! Linux历史概述 L…

【音频分离】demucs V3的环境搭建及训练(window)

文章目录 一、环境搭建(1)新建虚拟环境,并进入(2)安装pyTorch(3)进入代码文件夹,批量安装包(4)安装其他需要的包 二、数据集准备(1)下…

flask中的flask-login

flask中的flask-login 在 Flask 中,用户认证通常是通过使用扩展库(例如 Flask-Login、Flask-HTTPAuth 或 Flask-Security)来实现的。 本文详细地解释下 Flask 中的用户认证。这里是用 Flask-Login 插件为例,这是一个处理用户会话…

count(列名) ,count(1)与count(*) 有何区别?

Mysql版本:8.0.26 可视化客户端:sql yog 文章目录 一、Mysql之count函数简介二、count(列名) ,count(常量)与count(*) 有何区别?2.1 统计字段上的区别2.2 执行效率上的区别 一、Mysql之count函数简介 👉表达式 COUNT(…

DP-GAN损失

在前面我们看了生成器和判别器的组成。 生成器损失公式: 首先将fake image 和真实的 image输入到判别器中: 接着看第一个损失:参数分别为fake image经过判别器的输出mask,和真实的label进行损失计算。对应于: 其中l…

动态规划之树形DP

动态规划之树形DP 树形DP何为树形DP 树形DP例题HDU-1520 Anniversary partyHDU-2196 Computer834. 树中距离之和 树形DP 何为树形DP 树形DP是指在“树”这种数据结构上进行的动态规划:给出一颗树,要求以最少的代价(或取得最大收益&#xff…