fineui/demo/js/core/layout/demo.flow.js

import { shortcut, Widget } from "@/core";

@shortcut()
export class FlowLayout extends Widget {
    static xtype = "demo.flow";

    props = { baseCls: "demo-flow" };

    render() {
        return {
            type: "bi.center_adapt",
            items: [
                {
                    type: "bi.left",
                    items: [
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Left-1",
                            cls: "layout-bg1",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Left-2",
                            cls: "layout-bg2",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Left-3",
                            cls: "layout-bg3",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Left-4",
                            cls: "layout-bg4",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Left-5",
                            cls: "layout-bg5",
                        }
                    ],
                    hgap: 20,
                },
                {
                    type: "bi.right",
                    hgap: 20,
                    items: [
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Right-1",
                            cls: "layout-bg1",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Right-2",
                            cls: "layout-bg2",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Right-3",
                            cls: "layout-bg3",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Right-4",
                            cls: "layout-bg4",
                        },
                        {
                            type: "bi.label",
                            height: 30,
                            text: "Right-5",
                            cls: "layout-bg5",
                        }
                    ],
                    vgap: 20,
                }
            ],
        };
    }
}