2

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

选项卡位于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;
}

编辑：一些样板示例：

第一个标签：
图1

第二个标签：
图2

查看内容的高度有何不同

4

2 回答 2

2

这是一个使用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 对其进行转换

于 2021-04-01T18:02:55.770 回答
0

尝试这个。

<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;`);
  });
}
于 2021-07-01T12:09:54.403 回答