You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.4 KiB
3.4 KiB
绝对布局的隐藏知识点
bi.absolute布局可以说是在flex类布局没有大规模应用之前,解决布局问题的好伙伴
下面列举一下绝对布局的特性和在开发中可以解决的问题场景
- 绝对布局子元素位置与宽高的影响
对于绝对布局的子元素来说,如果还设置了width,且同时设置了left/right属性,那么仅有left生效.同理如果还设置了height,且top/bottom同时存在时top生效.
BI.createWidget({
type: "bi.absolute",
width: 200,
height: 200,
items: [
{
el: {
type: "bi.layout",
css: {
background: "blue",
},
},
inset: 0,
}, {
el: {
type: "bi.layout",
css: {
background: "red",
},
width: 24,
height: 24,
},
inset: 0,
},
],
});
如示例所示,虽然设置了right和bottom为0,但实际并未生效
- 可以利用绝对布局实现拉伸效果
如果想让子元素撑满父元素,可以利用绝对布局设置位置值来实现
BI.createWidget({
type: "bi.absolute",
width: 300,
height: 300,
css: {
background: "blue",
},
items: [
{
el: {
type: "bi.layout",
css: {
background: "red",
},
},
inset: 10,
},
],
});
- 绝对布局也有隐藏的z-index层级,排在后面的层级高
利用这种特性,我们可以实现一些元素覆盖在下层元素的场景
BI.createWidget({
type: "bi.absolute",
width: 200,
height: 200,
items: [
{
el: {
type: "bi.layout",
css: {
background: "blue",
},
},
inset: 0,
}, {
el: {
type: "bi.layout",
css: {
background: "red",
},
width: 24,
height: 24,
},
right: 10,
bottom: 10,
},
],
});
- 位置属性使用负值会有起效
在开发过程中会遇到有些按钮图标为了位置美观,会脱离正常位置的情况,此时利用负值属性可以很轻松实现
BI.createWidget({
type: "bi.absolute",
width: 300,
height: 300,
css: {
background: "red",
},
items: [
{
el: {
type: "bi.button",
text: "保存",
},
top: -30,
right: 10,
},
],
});
- 绝对布局支持shorthand写法inset
使用Chrome审查元素的同学可能发现了,绝对布局的元素在chrome中会显示inset: 0
这种形式,实际上这是top right bottom left属性的简写,规则遵循顺时针方向.FineUI同样支持了这种写法,需要注意的是只有第一种情况支持属性名为数字,其余情况需要加引号,毕竟我们是写js而不是css
inset: 10 /* value applied to all edges */
inset: "4 8" /* top/bottom left/right */
inset: "5 15 10" /* top left/right bottom */
inset: "2 3 3 3" /* top right bottom left */