Цвет метки активной вкладки углового материала изменяется при нажатии - PullRequest
Новая
       29

Цвет метки активной вкладки углового материала изменяется при нажатии

0 голосов
/ 22 февраля 2019

Я переопределил mat-tab-label-active, чтобы изменить цвет активной вкладки на собственный цвет (желтый), но когда я щелкаю в любом месте страницы, цвет меняется и становится грязным, как будто есть еще один слой блеклого цвета.поверх него ( см. этот скриншот ).Как сохранить цвет активной вкладки так же, как при ее нажатии все время / до смены вкладки?

мой код: 

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

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

На него уже был дан ответ, но я столкнулся с той же проблемой, но исправил ее с помощью другого решения, так как другие ответы не соответствовали моим предпочтениям.Вот что я сделал:

(Вот рабочий стек стека: 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 () метод позаботится о CSS в операторе [ngClass] на вкладке HTML. 

  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;
}
0 голосов
/ 22 февраля 2019

Непрозрачность и цвет фона динамически изменяются в зависимости от фокуса.Вы должны контролировать это.Что-то вроде 

::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», похоже, что вкладка имеет фокус, когда ее нет - вы не можете заметить разницу - нехороший пользовательский опыт.

...