布局是将页面拆分成一个一个的小单元,按照上下中左右进行排列。
前沿
在前端领域中,布局可以分为三大块「Float、Flex、Grid 」,Float可以说的上是上古时期的布局了,如今市面还是很少见的,除了一些古老的网站。
目前,平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局,合理的使用row、col、containers和container四个布局容器相关组件,将可以实现各种类型的布局样式,换句话说,平台实现的自由布局功能是Flex和Grid的结合体。
这里主要是讲解Flex和Grid布局,以及目前新的模板布局实现的思路。
Flex布局
Flex布局采用的是一维布局,那么什么是一维布局呢,所谓的一维布局就是只有一个方向、没有体积、面积,比如一条直线。它适合做局部布局,就像我们原来的顶部菜单、面包屑导航,以及现在的主视图字段配置。
从上图可以看看出,Flex布局只能在X、Y轴进行转换,它无法对上下左右四个方向同时处理,因为它没“面积”的概念。所以它最适合做局部布局。
优点
Flex的兼容性,可以看得出来,目前主流的浏览器都支持该属性。所以Flex兼容性强,如果你想对局部做布局处理,Flex是最好选择。
缺陷
刚刚也提到了,用户想要的布局是千奇百怪的,如果他想要的布局在现有的功能中无法实现怎么办?让用户放弃?还是说服他使用现在的布局。
Grid布局
Grid布局系统采用的是二维布局,二维布局有四个方向:上、下、左、右,它只有面积没有体积,比如一张纸、网格。
Grid布局
<div id="grid-container-one">
<div class="one-1">Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div class="one-6">Grid Item 6</div>
</div>
<div id="grid-container-two">
<div class="tow-1">Grid Item 1</div>
<div class="tow-2">Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
</div>
<div id="grid-container-three">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div class="grid">Grid Item 3</div>
<div class="grid-column">Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div class="grid-column">Grid Item 8</div>
</div>
HTML CSSResult Skip Results Iframe
EDIT ON
* {
box-sizing: border-box;
padding: 0;
margin: 0;
line-height: 1.5;
font-weight: bold;
text-align: center;
}
#grid-container-one{
background-color: black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
gap: 10px;
border: solid black 2px;
margin-bottom: 20px;
color: salmon;
}
#grid-container-one div {
border: solid white 2px;
padding: 10px;
}
#grid-container-one .one-1 {
grid-area: span 1/span 3;
text-aligin: center
}
#grid-container-one .one-6 {
grid-column: 3 /4;
}
#grid-container-two{
background-color: CADETBLUE;
display: grid;
grid-template-columns: 15% repeat(2, 1fr);
grid-template-rows: 100px;
text-shadow: 1px 1px 3px black;
margin-bottom: 20px;
color: salmon;
}
.tow-1 {
grid-area: span 3 / span 1
}
.tow-2 {
grid-area: span 1 / span 2
}
#grid-container-two div{
border: solid white 2px;
padding: 10px;
}
#grid-container-three{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 25%;
grid-auto-rows: 200px;
grid-auto-columns: 100px;
gap: 2px;
color: black;
text-decoration: underline;
margin-bottom: 2%;
}
#grid-container-three div{
background-color: salmon;
border: solid black 5px;
padding: 10px;
}
.grid-column{
grid-column: 5 / 7;
}
.grid{
grid-row: 1 /1;
grid-column: 4 / 5;
}
.grid-container-inline{
display: inline-grid;
grid-template-columns: repeat(2, 200px);
grid-template-rows: 100px 100px;
gap: 2px;
margin-bottom: 20px;
}
.grid-container-inline div{
padding: 35px;
border: solid black 2px;
background-color: PINK;
}
Resources1× 0.5× 0.25×Rerun
从上面的代码可以看出,Grid天生的支持整体布局,它甚至可以移行换位,它的强大之处可以颠覆你对布局的认知。
缺陷
虽然Grid很强大,但是它有一个致命的缺陷,那就是兼容性。
从上图可以看出,IE10以下、Chrome56以下、Firefox51以下等等都不支持该属性。
平台布局
名词解释
-布局容器相关组件:row
、col
、containers
和container
这四个组件的统称。
-基础布局属性:包括cols
、colSpan
、span
和offset
。
概述
一般的,我们对大多数组件提供了基本的布局属性配置,包括:
- cols:将内容区中的每行拆分的列数;当前元素未配置该属性时,将取离当前元素最近父元素属性。默认:1
- colSpan:当前元素相对于父元素在每行中所占列比例;优先于span。默认:FULL
- FULL:1
- HALF:1/2
- THIRD:1/3
- TWO_THIRDS:2/3
- QUARTER:1/4
- THREE_QUARTERS:3/4
- span:当前元素相对于父元素在每行中所占列数。默认:cols
- offset:当前元素相对于原所在列的偏移列数。
我们规定了默认栅格数为24,基础布局属性均是相对于默认栅格数而言的。
在使用基础布局属性时,请尽可能保证公式 (24 / cols) * span
以及以下列举的公式,其计算结果为整数,否则可能出现不符合预期的结果。
在使用colSpan时,span的计算公式为:span = cols * colSpan
在使用offset时,offset的计算公式为:offset = (24 / cols) * offset
平台内置组件
下面列举了平台内置组件在Form
和Detail
视图中使用时所支持的布局相关属性,包括可能影响部分区域显隐的相关属性。
表头说明:
- tag:xml配置标签
- widget:组件名称;xml属性;多个值属于别称。如:widget="form"
- 配置项:xml属性名称。
- 可选值:声明支持的配置项属性类型,不可识别或不可解析时将采用默认值。
- 作用:对配置项的简单描述,部分布局属性在上方进行了描述,不再赘述。
tag | widget | 配置项 | 可选值 | 默认值 | 作用 |
---|---|---|---|---|---|
view | cols | number | 1 | ||
element | form | cols | number | 1 | |
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | ||||
detail | cols | number | 1 | ||
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | ||||
DateTimeRangePicker | colSpan | enum | FULL | ||
span | number | cols | |||
offset | number | ||||
DateRangePicker | colSpan | enum | FULL | ||
span | number | cols | |||
offset | number | ||||
TimeRangePicker | colSpan | enum | FULL | ||
span | number | cols | |||
offset | number | ||||
colSpan | enum | FULL | |||
YearRangePicker | span | number | cols | ||
offset | number | ||||
field | 任意 | colSpan | enum | FULL | |
span | number | cols | |||
offset | number | ||||
pack | fieldset/group | cols | number | 1 | |
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | ||||
title | string | 分组 | 标题;空字符串或不填,则隐藏标题区; | ||
tabs | cols | number | 1 | ||
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | ||||
tab | cols | number | 1 | ||
title | string | 选项页 | 标题;必填;空字符串或不填则显示默认值; | ||
row | cols | number | 1 | ||
align | top/middle/bottom | 垂直对齐方式 | |||
justify | start/end/center/space-around/space-between | 水平对齐方式 | |||
gutter | number,number?示例:24 = 24,2412,12 | 24,24 | 水平/垂直间距 | ||
wrap | boolean | true | 是否允许换行 | ||
col | cols | number | 1 | ||
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | 偏移单元格数 | |||
mode/widthType | manual/full | manual | 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性; | ||
containers | cols | number | 1 | ||
align | top/middle/bottom | 垂直对齐方式 | |||
justify | start/end/center/space-around/space-between | 水平对齐方式 | |||
gutter | number,number?示例:24 = 24,2412,12 | 0,24 | 水平/垂直间距 | ||
wrap | boolean | true | 是否允许换行 | ||
container | cols | number | 1 | ||
colSpan | enum | FULL | |||
span | number | cols | |||
offset | number | 偏移单元格数 | |||
align | top/middle/bottom | 垂直对齐方式 | |||
justify | start/end/center/space-around/space-between | 水平对齐方式 | |||
gutter | number,number?示例:24 = 24,2412,12 | 0,24 | 水平/垂直间距 | ||
wrap | boolean | true | 是否允许换行 | ||
mode/widthType | manual/full | full | 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性; |
基础布局
基础布局提供了在不使用任何布局容器相关组件的情况下,仅使用cols、span、offset这三个属性控制行列的布局能力。
其本质上是flex布局的扩展,但依旧无法脱离flex布局本身的限制,即元素始终是自上而下、自左向右紧凑的。
下面将使用fieldset和tabs/tab组件来介绍各个属性在实际场景中的使用。
示例1:默认撑满一行
<pack widget="fieldset" title="示例1">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
结果展示
示例2:一行两列:cols=2; colSpan=HALF/span=1
<pack widget="fieldset" title="示例2" cols="2">
<field data="code" widget="Input" colSpan="HALF" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" colSpan="HALF" label="名称" placeholder="请输入" required="true" />
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例2" cols="2">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>
结果展示
示例3:使用offset实现中间空一个字段空间的布局
<pack widget="fieldset" title="示例3" cols="3">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" span="1" offset="1" label="名称" placeholder="请输入" required="true" />
</pack>
PS:offset的作用有限,offset最优实践的前提是在同一行中进行偏移,要实现特殊布局功能,请使用自由布局相关布局能力。
结果展示
示例4:属性cols就近取值
<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
<pack widget="tab" title="示例4-1">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="tab" title="示例4-2">
<field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>
</pack>
结果展示
<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
<!-- 特指该tab使用cols="1"属性,其他tab继续使用tabs配置的cols="2"属性 -->
<pack widget="tab" title="示例4-1" cols="1">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="tab" title="示例4-2">
<field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>
</pack>
结果展示
自由布局
自由布局提供了无法通过基础布局能力实现的其他布局能力,总的来说,自由布局是对grid布局和flex布局的结合,它既拥有grid布局对页面进行单元格拆/合的能力,在每个单元格中,使用flex布局进行紧凑排列。
下面将使用fieldset组件介绍各个属性在实际场景中的使用。
组件组合
row/col:两个组件共同形成行和列,在一行中拆分成24个栅格,每个列的跨度不超过24。当一行中,所有列的跨度和超过24时,将会自动换行。
containers/row/container:三个组件共同形成一个二维网格,以此实现grid布局的基本能力。每个单元格(container)中使用flex布局。
PS:以下示例为了体现布局效果,可能会出现重复字段定义,业务上在使用时需要避免这种定义。
示例1:仅使用1/2左侧空间
小贴士:在使用row和col组合时,如果在一个col中有且仅有一个子元素,则col可以缺省。col相关属性可以配置在该子元素上。
<pack widget="fieldset" title="示例1">
<pack widget="row" cols="2">
<!-- 此处显式定义col组件,field标签上的基础布局属性将失效 -->
<pack widget="col" span="1">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
<pack widget="row" cols="2">
<pack widget="col" span="1">
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
</pack>
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例1">
<pack widget="row" cols="2">
<!-- 此处缺省col组件,field标签上的基础布局属性可生效 -->
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="row" cols="2">
<field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>
</pack>
结果展示
示例2:使用布局容器实现中间空一个字段空间的布局
<pack widget="fieldset" title="示例2">
<pack widget="containers">
<pack widget="row">
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container"></pack>
<pack widget="container">
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
</pack>
</pack>
</pack>
结果展示
图3-5-6-40 示例效果
示例3:一行5列(基础布局属性公式无法计算出整数的情况)
<pack widget="fieldset" title="示例3">
<pack widget="containers">
<pack widget="row">
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
</pack>
</pack>
结果展示
示例4:共2行,其中1行未3列,另1行为2列
该示例可以使用任何一种组件组合都可以实现,结果一致。
<!-- 使用containers/row/container -->
<pack widget="fieldset" title="示例4">
<pack widget="containers">
<pack widget="row">
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
<pack widget="row">
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
</pack>
</pack>
------------------------------ 或 ------------------------------
<!-- 使用row/col,其中col缺省 -->
<pack widget="fieldset" title="示例4">
<pack widget="row" cols="3">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
</pack>
<pack widget="row" cols="2">
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
<field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
结果展示
示例5:布局容器的垂直居中
左侧容器高度被子元素撑开,右侧容器在垂直方向居中
<pack widget="fieldset" title="示例5">
<pack widget="containers">
<pack widget="row">
<pack widget="container">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
<field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>
<pack widget="container" align="middle">
<field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
</pack>
</pack>
</pack>
</pack>
结果展示
举例
这里拿PetTalent举例,仿造教程上面效果,除了例子中的效果,自己可以做更多的尝试
Step1 修改PetTalent的form视图如下
给creater字段增加一个属性配置 offset="1"
<field data="creater" widget="SSConstructSelect" offset="1" submitFields="creater,name" responseFields="name"/>
Step2 重启看效果
Step3 修改PetTalent的form视图如下
给【基础信息】增加一个属性cols="4",给name字段增加一个属性span="2",给creater和nick字段增加一个属性span="1":
<pack widget="group" title="基础信息" cols="4">
<field invisible="true" data="id" label="ID" readonly="true"/>
<field data="name" label="达人" required ="true" span="2"/>
<field data="nick" compute="activeRecord.name" readonly = "true" span="1"/>
<field data="creater" widget="SSConstructSelect" submitFields="creater,name" responseFields="name" span="1"/>
<field data="dataStatus" label="数据状态" >
<options>
<!-- option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/ -->
<option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
<option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
<option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
</options>
</field>
<field invisible="true" data="createDate" label="创建时间" readonly="true"/>
<field invisible="true" data="writeDate" label="更新时间" readonly="true"/>
<field data="createUid" label="创建人id"/>
<field data="writeUid" label="更新人id"/>
</pack>
Step4 重启看效果
Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9262.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验