Html 使用mat tab将水平选项卡转换为垂直选项卡
我正在使用mat选项卡组水平显示选项卡。它在电脑屏幕上看起来不错。但在手机屏幕上,它看起来不是很整洁。有没有一种方法可以将它转换成垂直标签列表,如果它的屏幕是手机大小的话Html 使用mat tab将水平选项卡转换为垂直选项卡,html,css,angular,mat-tab,Html,Css,Angular,Mat Tab,我正在使用mat选项卡组水平显示选项卡。它在电脑屏幕上看起来不错。但在手机屏幕上,它看起来不是很整洁。有没有一种方法可以将它转换成垂直标签列表,如果它的屏幕是手机大小的话 <mat-tab-group> <mat-tab> <ng-template mat-tab-label> <mat-icon ngClass="material-icons-outlined">home</ma
<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>
家
帐户摘要
.
.
.
您可以使用css和“阴影穿透”实现基本功能
: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;
}
}