Question

我正在使用Angular-material选项卡显示一些选项卡。我想在每个标签后添加一些箭头CSS。以下是我正在尝试的代码段。但无法显示箭头

<mat-tab-group>
        <mat-tab label="Marketing" *ngIf="isMarketingTaskEnabled()">
            <div class="step-content">
                    <my-task-list [Search]="search" [jobType]="myTaskType.MARKETING" [salesOrders]="salesOrders" [tableData]="tableData[myTaskType.MARKETING]"></my-task-list>
            </div>
        </mat-tab>

        <mat-tab label="Project Management" *ngIf="isProjectManagementEnabled()">
            <my-task-list [Search]="search" [jobType]="myTaskType.PROJECT_MANAGEMENT" [salesOrders]="salesOrders" [tableData]="tableData[myTaskType.PROJECT_MANAGEMENT]"></my-task-list>
        </mat-tab>
</mat-tab-group


.mat-tab-label.mat-tab-label-active::after{
    content: '';
    display: block;  
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #3c4650 ;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left:100%;
    z-index: 2;
}

Answer 1

如果要自定义标签标题（其中包括图标，图像），请改为纯标题。然后，您需要在mat-tab中使用 ng-template 和 mat-tab-label 。例如：

<mat-tab-group>
    <mat-tab>
      <ng-template mat-tab-label>
         <mat-icon>home</mat-icon> Home
      </ng-template>
      <p> Tab Content </p>
   </mat-tab>
</mat-tab-group>

供参考：Angular Material Tabs

在“角度材质”选项卡后添加箭头css

1 个答案: