4.4 KiB

Raw Permalink Blame History

绝对布局的隐藏知识点

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 */

绝对布局可以和其他布局共存

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,
                    },
                ],
            },
        ];
    },
});

4.4 KiB Raw Permalink Blame History

绝对布局的隐藏知识点

4.4 KiB

Raw Permalink Blame History