黄金布局:如何增加页眉标签的高度

Golden Layout: how to increase Header Tabs height

本文关键字：标签 高度 增加 布局 何增加 黄金      更新时间：2023-09-26

我试图实现GoldenLayout，但似乎不可能改变每个窗口标题内的标签高度。

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

我尝试了以下规则

.lm_header {
  height: 40px !important;
}

但是它是JS风格的一个简单的覆盖，并且由于底部窗格的位置而不完整(请参阅工作示例)。

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

对于制表符大小，您需要在传递给GoldenLayout的配置对象上设置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;
 }

最低限度:更新小提琴

为了使它看起来很好，更新line-height为.lm_tab，改变.lm_close_tab的height，并改变top的位置为.lm_controls。

CSS: 

.lm_tab {
  height: 40px !important;
  line-height:40px;
}
.lm_close_tab {
  height: 35px !important;
}
.lm_controls {
  top:13px;
}

更新的小提琴2

相关文章：