Question

我正在使用角材料进行角发展。

HTML组件

<mat-tab-group headerPosition="above" [selectedIndex]="1">
    <mat-tab label="Home" routerLinkActive="active-link"> <app-homer></app-home></mat-tab>
    <mat-tab label="Orders" routerLinkActive="active-link"> <app-order></app-order> </mat-tab>
    <mat-tab label="Contact Us" routerLinkActive="active-link"> <app-contact></app-contact> </mat-tab>
    <mat-tab label="Profile" routerLinkActive="active-link"> <app-profile></app-profile></mat-tab>
  </mat-tab-group>

CSS

.mat-tab-label{
    margin-top: 20px;
    border: 2px solid black; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 10vw;
    height: 4vh !important;
    background-color: black;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
    color: yellow;
}

我有自定义的默认选项卡，它通过提供特定的颜色和边框（如CSS所示）来呈现白色。当我加载页面时，我正在选择组件，但是该选项卡不处于活动状态，看起来像已禁用。但是，如果单击，则可以看到差异，单击时将显示给定的突出显示的颜色。有什么方法可以使标签在加载时显示为活动状态。

在mat-tab-link routerLinkActive =“ active-link”中，但在mat-tab中没有这样的功能吗？

由于动画屏幕加载功能，我决定使用mat-tag-group和mat-tab。

stackblitz link

Answer 1

最简单的解决方法之一就是将ViewEncapsulation设置为None。

组件文件：

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

您的组件css文件：


.mat-tab-label{
    margin-top: 20px;
    border: 2px solid black; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 10vw;
    height: 4vh !important;
    background-color: black;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
    color: yellow;
}

/* Styles for the active tab label */

// change any styles you want for active tab
.mat-tab-label.mat-tab-label-active {
    background-color: white;
}

您的html文件：

<mat-tab-group headerPosition="above"> // if you want specific tab then use [selectedIndex]="INDEX_OF_TAB"
    <mat-tab label="Home"></mat-tab>
    <mat-tab label="Orders"></mat-tab>
    <mat-tab label="Contact Us"></mat-tab>
    <mat-tab label="Profile"></mat-tab>
</mat-tab-group>

ref：也请检查ViewEncapsulation

Answer 2

正如我在here中回答的那样，浏览器在刷新后将不会保留临时数据，它会擦除以前完成的所有工作，为克服此问题，我们可以使用本地存储机制，请尝试使用此本地存储代码帮助您，

存储到本地存储

handleMatTabChange(event: MatTabChangeEvent) {
  localStorage.setItem('curentab', event.index);
}

恢复页面加载：

ngOnInit() {
  let index = localStorage.getItem('curentab');
  this.tabGroup.selectedIndex = index; 
}

希望这会给您一些想法，

如何使活动标签在mat-tab中突出显示？

2 个答案: