Angular Flex-макет с макетом вкладок

Question

Я пытаюсь выровнять заголовок и Angular вкладки (https://material.angular.io/components/tabs/overview) в один ряд, используя Flex-Layout (https://github.com/angular/flex-layout), но содержимое Вкладки для отображения на весь экран. На данный момент контент отображается только под вкладками (см. изображение ). Я хочу, чтобы содержимое отображалось следующим образом picture . Итак, вместе я хочу, чтобы вкладки выглядели как this , а содержимое - this .

Это код в компоненте. html, который выводит я первая картинка .

<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 Вкладки материалов, как настроить строку вкладок и добавить текст или выпадающий список? ). Мне просто нужно было сделать позицию заголовка абсолютной. Вот файл 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;

}