Angular Material mat-tabs 都有不同的高度

问题描述

我希望所有标签都具有相同的高度，无论里面有什么内容。

标签位于 div 内。最好我不需要为此 div 设置固定高度，而是 div 应该具有包含最多东西的 mat-tab 的高度。

还没有发现任何真正有效的东西，如果有人能帮忙那就太好了！

我当前的代码：

HTML：

<div fxLayout="column" style="min-height: 100%; height: 100%">
  <mat-tab-group style="height: 100%">
    <mat-tab label="1">
      <mat-card fxFill class="mat-elevation-z4 about-card">
        this mat-card contains the most amount of stuff
      </mat-card>
    </mat-tab>
    <mat-tab label="2">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
    <mat-tab label="3">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

CSS：

.about-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
}

编辑：一些样板示例：

第一个标签：

第二个标签：

看看内容的高度有什么不同

解决方法

这是一个使用 javascript 的解决方案。您需要使用 max height 获取元素并更新 mat-tab-body-wrapper 容器的高度：

 ngAfterViewInit() {
    const groups = document.querySelectorAll("mat-tab-group");
    groups.forEach(group => {
      const tabCont = group.querySelectorAll("mat-tab-body");
      const wrapper = group.querySelector(".mat-tab-body-wrapper")
      const maxHeight = Math.max(...Array.from(tabCont).map(body => body.clientHeight));
      wrapper.setAttribute("style",`min-height:${maxHeight}px;`);
    });
  }

您可以使用 angular API 对其进行转换

,

试试这个。

<mat-tab-group #myTabGroup id="myTabGroup">

ngAfterViewInit() {
  this.setTabHeights();
}

@HostListener('window:resize',['$event'])
handleResize(event: Event) {
  this.setTabHeights();
}

setTabHeights() {
  const tabCardBody = document
    .querySelectorAll('mat-tab-group#setupWarehouseDataTab mat-tab-body');
  if (!tabCardBody) return;
  const maxHeight = Math.max(...Array.from(tabCardBody)
    .map((elm: any) => elm.clientHeight));
  tabCardBody.forEach((elm => {
    elm.setAttribute('style',`height:${maxHeight}px;`);
  });
}