Как скрыть заголовок конкретной вкладки goldenLayout

Question

myLayout.config.settings.hasHeaders = false;  

Я использую этот, но это скрывает все заголовки вкладок. Мне нужно скрыть только заголовок определенной вкладки? Пожалуйста, помогите мне.

Answer 1

Так как я играю с этим уже более месяца и очень предан этому, я подумал, что начну вносить свой вклад в тег сообщества золотой компоновки.

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

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

Если вы посмотрите на строку кода, на которую я ссылаюсь выше, GL использует эту настройку. Так что вы могли бы просто установить headerhieght конкретного пункта.

Кроме того, так как это касается только headerhieght если это равно false, вы можете иметь его в true и выбирать, для каких из них вы хотите показывать заголовки.

Надеюсь, это поможет.

Answer 2

Используйте 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 к элементу в Golden-layout, добавьте что-то вроде этого:

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'