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.
185 lines
4.4 KiB
185 lines
4.4 KiB
2 years ago
|
# 绝对布局的隐藏知识点
|
||
|
|
|
||
|
|
bi.absolute布局可以说是在flex类布局没有大规模应用之前,解决布局问题的好伙伴
|
||
|
|
|
||
|
|
下面列举一下绝对布局的特性和在开发中可以解决的问题场景
|
||
|
|
|
||
|
|
1. 绝对布局子元素位置与宽高的影响
|
||
|
|
|
||
|
|
对于绝对布局的子元素来说，如果还设置了width,且同时设置了left/right属性,那么仅有left生效.同理如果还设置了height,且top/bottom同时存在时top生效.
|
||
|
|
|
||
|
|
```demo
|
||
|
|
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,但实际并未生效
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
2. 可以利用绝对布局实现拉伸效果
|
||
|
|
|
||
|
|
如果想让子元素撑满父元素,可以利用绝对布局设置位置值来实现
|
||
|
|
|
||
|
|
```demo
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.absolute",
|
||
|
|
width: 300,
|
||
|
|
height: 300,
|
||
|
|
css: {
|
||
|
|
background: "blue",
|
||
|
|
},
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: "bi.layout",
|
||
|
|
css: {
|
||
|
|
background: "red",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
inset: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
3. 绝对布局也有隐藏的z-index层级,排在后面的层级高
|
||
|
|
|
||
|
|
利用这种特性,我们可以实现一些元素覆盖在下层元素的场景
|
||
|
|
|
||
|
|
```demo
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
4. 位置属性使用负值会有起效
|
||
|
|
|
||
|
|
在开发过程中会遇到有些按钮图标为了位置美观,会脱离正常位置的情况,此时利用负值属性可以很轻松实现
|
||
|
|
|
||
|
|
```demo
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.absolute",
|
||
|
|
width: 300,
|
||
|
|
height: 300,
|
||
|
|
css: {
|
||
|
|
background: "red",
|
||
|
|
},
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "保存",
|
||
|
|
},
|
||
|
|
top: -30,
|
||
|
|
right: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
5. 绝对布局支持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 */
|
||
|
|
```
|
||
|
|
|
||
|
|
6. 绝对布局可以和其他布局共存
|
||
|
|
|
||
|
|
FineUI中组件render方法支持return对象或者数组,可以利用绝对布局几乎没有副作用的特点,附加一些内容
|
||
|
|
|
||
|
|
```
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.basic_button",
|
||
|
|
width: 200,
|
||
|
|
height: 200,
|
||
|
|
cls: "bi-border",
|
||
|
|
render: () => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
type: "bi.center_adapt",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.button",
|
||
|
|
text: "居中",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}, {
|
||
|
|
type: "bi.absolute",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "左上角",
|
||
|
|
},
|
||
|
|
top: 10,
|
||
|
|
right: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|