mat-tab-group показать вертикальный, а не горизонтальный Angular

Question

я работаю с Angular материалом, хочу использовать вкладку мат, но показывать как вертикальную, а не горизонтальную ...

Уточнить, что модуль общего материала хорошо импортирован в файл module.ts и другие компоненты работают хорошо

import { MatTabsModule } from '@angular/material/tabs';


@NgModule({
exports: [
   MatTabsModule
 ],
})
export class MaterialModule {}

html:

<mat-tab-group>
   <mat-tab label="First"> Content 1 </mat-tab>
   <mat-tab label="Second"> Content 2 </mat-tab>
   <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Но результат:

Answer 1

Это то, что я использовал в своем проекте. Надеюсь, это поможет.

:host {
  >.container {
      max-width: 1264px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      background: none;
  }
  ::ng-deep {
      .mat-tab-group {
          flex-direction: row;
      }
      .mat-tab-header {
        border-bottom: none;
      }
      .mat-tab-header-pagination {
          display: none !important;
      }
      .mat-tab-labels {
        flex-direction: column;
        background-color: #E6E7EB;
        box-shadow:5px 5px 5px #888888;
      }
      .mat-tab-label.mat-tab-label-active {
        background-color:#006599;
        color: white;
        box-shadow:5px 5px 5px #888888;
      }
      .mat-tab-label.mat-tab-label-active:hover {
        background-color:#006599;
      }
      .mat-tab-label:hover {
          background-color: white;
      }
      .mat-ink-bar {
          height: 100%;
          left: 98% !important;
      }
      .mat-tab-body-wrapper {
          flex: 1 1 auto;
      }
  }
}