GoldenLayout，如何隐藏/显示组件? [英] GoldenLayout, how to hide/show component?

问题描述

我有一个基于GoldenLayout(1.5.9)的应用程序.布局是包含两个列的行. 请参阅下面我感兴趣的列的配置.

I have an application based on GoldenLayout (1.5.9). The layout is a Row containing two Columns. See below the configuration of the column I'm interested in.

let config = {
    content: [
        {
            type: "row",
            content: [
                {
                    type: "column",
                    width: 31,
                    content: [
                        {
                            type: "stack",
                            isClosable: false,
                            content: [...]
                        },
                        {
                            type: "component",
                            height: 30,
                            title: "Filters",
                            componentName: "templateComponent"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

现在，我希望能够关闭或隐藏该组件并使它重新出现 按工具栏按钮(即以编程方式).我进行了各种失败的尝试:

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically). I made various unsuccessful attempts:

1. 如果我使用x按钮关闭组件，则父列 神奇地消失了，因此组件上的后续addChild parent(保存在某处)将组件添加为Stack的子代. 不是我的意图.

1. If I close the component using the x button, the parent Column magically disappears so a subsequent addChild on the component parent (saved somewhere) adds the component as a child of the Stack. Not what I intended.

如果我隐藏了component.element，则该组件消失，但是 孔仍然存在.也就是说，堆栈不会调整大小.

If I hide the component.element, the component disappears, but an hole remains. That is, the Stack does not resize.

我在文档中找不到文档化的hide()方法的任何地方 组件，即使我将其包装在行，列或堆栈中也是如此.

I don't find anywhere the documented hide() method on the Component, even if I wrap it in a Row, Column or Stack.

如果我手动在Stack和 组件降级，我得到了我想要的(也就是给 堆叠几乎所有高度)，但不组合setSize(?,?) 似乎在编程上也是如此.

If I manually move the separator between the Stack and the Component way down I obtain what I want (that is, to give to the Stack almost all the height) but no combination of setSize(?, ?) seems to do the same programmatically.

有什么主意吗? 谢谢！

Any idea? Thanks!

更新: 如果我将组件包装到另一个Stack中，则容器Column不会消失，因此我可以将其添加回去:

UPDATE: If I wrap the component into another Stack, the container Column does not disappears so I can add it back:

{
    type: "stack",
    height: 30,
    id: "filtersFrame",
    isClosable: true,
    content: [
        {
            type: "component",
            title: "Filters",
            componentName: "templateComponent",
            componentState: { template: "filter-template" }
        }
    ]
}

只需忽略高度(新堆栈的高度始终为50％)，并且存在剔除模板，但不会通过剔除运行.但这是另一个问题.

Simply the height is ignored (the new stack is always 50% in height) and the knockout template is there but it is not run through knockout. But this is another problem.

推荐答案

我遇到了同样的问题，找到了一个简单的解决方案:请注意，我使用的是Angular5，所以它在打字稿中，但是代码很容易翻译成香草JS.

I came across this same issue and found an easy solution: Note that I'm using Angular5, so this is in typescript, but the code is easily translatable to vanilla JS.

我发现，如果您只是简单地调用show/hide，则updateSize不会执行任何操作，而是留下一个大的空洞，因此您也应该将大小设置为0/[whatever].

I found that if you simply call show/hide, the updateSize doesn't do anything, leaving a large empty hole, so you should set the size to 0/[whatever], too.

如果将大小设置为0并在不调用hide()的情况下调用updateSize()，则该元素将变为细条状.

If you set the size to 0 and call updateSize() without calling hide(), the element will become thin strip.

您必须同时执行两项操作才能发挥全部作用.

You must do both for the full effect.

    let smartFormsRow = this._goldenLayout.root.getItemsById("smartformsrow");
    var isHidden = smartFormsRow[0].config.height == 0;
    if (isHidden) {
        smartFormsRow[0].element.show(); //jquery hide
        smartFormsRow[0].config.height = 30; //30%
    } else {
        smartFormsRow[0].element.hide(); //jquery show
        smartFormsRow[0].config.height = 0;
    }

    this._goldenLayout.updateSize();

这篇关于GoldenLayout，如何隐藏/显示组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！