javascript - 金色布局 : how to increase Header Tabs height

Question

我尝试执行 GoldenLayout但似乎无法更改放置在每个窗口标题内的选项卡的高度。

在原来的主题.lm_header中有一个固定高度为20px的CSS Class，但是之后，高度被JS直接设置为内联样式。

我尝试了以下规则

.lm_header {
  height: 40px !important;
}

但它只是对 JS 样式的简单覆盖，并且由于底部 Pane 的位置而不完整(请参阅 working example )。

是否有标准方法来改变不同元素的大小？

Answer 1

对于选项卡大小，您需要在传递给 GoldenLayout 的 configuration object 上设置 dimensions.headerHeight 属性，并调整样式表。

JS:

 var myLayout = new GoldenLayout({
    dimensions: {
            headerHeight: 46
        },
        content:[{
            type: 'row',
            content:[{
                type: 'component',
                componentName: 'test-component'
            },{
                type: 'component',
                componentName: 'test-component'
            }]
        }]
    });

CSS:

.lm_tab {
   height: 40px !important;
 }

最低限度: Updated Fiddle

更新

为了让它看起来更漂亮，更新 line-height 的 .lm_tab ，更改 height 的 .lm_close_tab ，并更改 top 的 .lm_controls 位置。

CSS:

.lm_tab {
  height: 40px !important;
  line-height:40px;
}

.lm_close_tab {
  height: 35px !important;
}

.lm_controls {
  top:13px;
}

Updated Fiddle 2