Angular Flex-layout 使用标签布局

Question

我正在尝试对齐标题和 Angular 标签（https://material.angular.io/components/tabs/overview) in one row using Flex-Layout (https://github.com/angular/flex-layout) but the content of the Tabs to be displayed over the whole screen. At the moment the content is only displayed under the Tabs (see picture). I want the content to be displayed like this picture. So together I want the tabs to look like this and the content to look like this。

这是 component.html 中的代码，它带给我 the first picture。

<div fxFlex fxLayout="row" >
<h2 class="title">Partner Summary</h2>
</div>
<mat-tab-group>
<mat-tab label="Overview"> <app-overview-partners></app-overview-partners></mat-tab>
<mat-tab label="Table"></mat-tab>      
</mat-tab-group>

感谢任何提示！

Answer 1

快速更新，我找到了适合我的解决方案 (Angular Material Tabs how to customize tab row and add text or dropdown list?)。我只需要让标题的位置是绝对的。这是 html 文件：

<h2 class="title">Partner Summary</h2>

<mat-tab-group mat-align-tabs="end" animationDuration="0ms">
<mat-tab label="Overview">
    <app-overview-partners></app-overview-partners>
</mat-tab>
<mat-tab label="Table">
    <app-table-partners></app-table-partners>
</mat-tab>
</mat-tab-group>

这里是重要的 css 变化：

.title {
    position: absolute;
    top: -10px;
    left: 34px;

}

Angular Flex-layout 使用标签布局

Angular Flex-layout with Tabs layout

css

angular

tabs

angular-flex-layout