Question

我覆盖了mat-tab-label-active，将活动选项卡的颜色更改为自定义颜色（黄色），但是当我单击页面中的任何位置时，颜色都会更改并变脏，就像还有另一层褪色的颜色一样最上面（see this screenshot）。如何一直保持活动标签的颜色，就像始终单击活动标签一样/直到更改标签为止？

我的代码：

::ng-deep.mat-tab-label.mat-tab-label-active {
  background-color: #FCE500;
  font-weight: 700;
  color: black;
}

Answer 1

不透明度和背景色会根据焦点动态更改。您需要控制它。像

::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
  background-color: #FCE500;
  font-weight: 700;
  color: black;
  opacity: 1;
}

我不建议您更改不透明度，因为如果将其始终设置为“ 1”，则选项卡在没有透明度时看起来会具有焦点-您无法分辨出差异-不好的用户体验。

Answer 2

它已经被回答了，但是我遇到了同样的问题，但是用另一个解决方案解决了这个问题，因为其他答案与我的偏好不符。这就是我所做的：

（这是一个有效的堆叠闪电战：https://stackblitz.com/edit/angular-cxynsa）

我声明了导航标签。并声明了SelectionModel。

  public tabs = [
    {value: 'Stepper', link: './stepper'},
    {value: 'Quotations', link: './quotations'},
    {value: 'Designs', link: './designs'},
    {value: 'Elements', link: './elements'},
    ];
  private selection = new SelectionModel();

在我的HTML中，它看起来像这样：

<nav mat-tab-nav-bar class="tabs-group">
  <a *ngFor="let tab of tabs" (click)="select(tab)" mat-tab-link [routerLink]="tab.link" 
     class="header-btn" [ngClass]="{focus: isSelected(tab)}">
    <a>{{tab.value}}</a>
  </a>
</nav>
<router-outlet class="router-outlet-small"></router-outlet>

我有两种方法可以进行选择。我也想选择第一个选项卡作为默认选项。 select（）方法将选择选项卡，isSelected（）方法将处理选项卡HTML的[ngClass]语句中的CSS。

  ngOnInit() {
    this.selection.select(this.tabs[0]); // Will select the first tab.
  }

  select(tab) {
    if (!this.selection.isSelected(tab)) {
      this.selection.clear(); // Only one tab can be selected in this way
      this.selection.select(tab);
    }
  }

  isSelected(tab): boolean {
    return this.selection.isSelected(tab);
  }

isSelected（）方法将返回true / false，这将触发样式类到达header-btn.focus，这将在下面的css中显示。

.header-btn {
 // My css
}

.header-btn.focus {
  opacity: 1;
}

Answer 3

是的，褪色有点烦人（可能取决于页面上使用的颜色组合）。

我的标签定义为：

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 1">Content 2</mat-tab>
</mat-tab-group>

和以下 css 规则帮助将不透明度设置为 1

.mat-ripple.mat-tab-label.mat-focus-indicator.mat-tab-label.ng-star-inserted {
    opacity: 1;
}

我启用了涟漪效应，如果你禁用它，可能需要从规则中删除 mat-ripple 选择器。

单击时，角材料活动标签的标签颜色会更改

3 个答案: