如何解决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;`);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。