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;
      }
  }
}