使用 mat-tab 将水平选项卡转换为垂直选项卡答案

【问题标题】：Convert horizontal tabs to vertical tabs using mat-tab使用 mat-tab 将水平选项卡转换为垂直选项卡
【发布时间】：2021-04-13 16:50:47
【问题描述】：

我正在使用 mat-tab-group 水平显示选项卡。在电脑屏幕上看起来没问题。但是在手机屏幕上，看起来就不是很整齐了。如果它的移动尺寸屏幕，有没有办法将其转换为垂直标签列表？

   <mat-tab-group>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon ngClass="material-icons-outlined">home</mat-icon>
        <span>Account Summary</span>
    </ng-template>
      <ng-template matTabContent>
        <app-summary
        [loanNumber]="loanNumber"
      ></app-summary>
      </ng-template>
    </mat-tab>
    <mat-tab>
      .
      .      
      .
    </mat-tab>
</mat-tab-group>

【问题讨论】：

标签： html css angular mat-tab

【解决方案1】：

您可以使用 css 和“shadow-piercing”实现基本功能

https://stackblitz.com/edit/angular-tab-vert

:host ::ng-deep {
  .mat-tab-labels {
    flex-direction: column;
  }
  .mat-tab-group {
    flex-direction: row;
  }
  .mat-ink-bar {
    height: 100%;
    left: 100% !important;
  }
  .mat-tab-header {
    border-bottom: none;
  }
  .mat-tab-body-wrapper {
    flex: 1 1 auto;
  }
}

【讨论】：