fineui/demo/js/core/abstract/combination/demo.tab.js

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

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

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

    _createTabs(v) {
        switch (v) {
            case 1:
                return createWidget({
                    type: "bi.label",
                    cls: "layout-bg1",
                    text: "面板1",
                });
            case 2:
                return createWidget({
                    type: "bi.label",
                    cls: "layout-bg2",
                    text: "面板2",
                });
        }
    }

    render() {
        this.tab = createWidget({
            type: "bi.button_group",
            height: 30,
            items: [
                {
                    text: "Tab1",
                    value: 1,
                    width: 50,
                    cls: "mvc-button layout-bg3",
                },
                {
                    text: "Tab2",
                    value: 2,
                    width: 50,
                    cls: "mvc-button layout-bg4",
                }
            ],
            layouts: [
                {
                    type: "bi.center_adapt",
                    items: [
                        {
                            el: {
                                type: "bi.horizontal",
                                width: 100,
                            },
                        }
                    ],
                }
            ],
        });

        const tab = createWidget({
            direction: "custom",
            type: "bi.tab",
            element: this,
            tab: this.tab,
            cardCreator: bind(this._createTabs, this),
        });
        createWidget({
            type: "bi.absolute",
            element: this,
            items: [
                {
                    el: this.tab,
                    left: 200,
                    top: 200,
                }
            ],
        });

        tab.setSelect(2);
    }
}