javascript - 如何隐藏goldenLayout的特定选项卡标题

Question

myLayout.config.settings.hasHeaders = false;  

我正在使用这个，但这隐藏了所有选项卡标题。我只需要隐藏特定的标签页眉吗？请帮我。

Answer 1

像这样使用 css，但您必须检查它是否适合您（例如在 Sass 中）：

.layout-no-header {
  > .lm_item {
    height: 100% !important;
    > .lm_header {
      height: 0 !important;
      overflow: hidden;
    }
    > .lm_items {
      height: 100% !important;
      > .lm_item_container {
        height: 100% !important;
        > .lm_content {
          height: 100% !important;
        }
      }
    }
  }
}

还要将 css 添加到黄金布局中的项目，添加如下内容：

this.layout.on('itemCreated', function (item) {
  if (item.config.cssClass) {
    const classes = _.isArray(item.config.cssClass) ? item.config.cssClass : item.config.cssClass.split(' ');
    classes.forEach(c => {
      item.element.addClass(c);
    });
  }
});

并在您的布局配置中，添加

cssClass: 'layout-no-header'

Answer 2

由于我已经玩了一个多月了，并且在这一点上非常投入，我想我会开始为golden-layout社区标签做出贡献。

https://github.com/deepstreamIO/golden-layout/blob/master/src/js/LayoutManager.js#L816

if( config.settings.hasHeaders === false ) {
            config.dimensions.headerHeight = 0;
        }

如果您查看我上面引用的代码行，这就是 GL 使用该设置的方式。所以你可以做的就是设置headerheight特定项目的。

此外，由于这仅涉及headerheightif thats 等于 false，因此您可以将其设置为 true 并选择要为其显示标题的那些。

希望这会有所帮助。