Angular Material 2: mat-tab-nav-bar: Root tab active ?

3
votes

I use a tab-nav-bar. my tabs are created correctly. When I click on one tab, the route works, and the tab become active correctly.

My problem is when I first load the website, the root tab has the ink as expected, but the label is not in active mode

tab-nav-bar

  • On top: on loading, the label "home" is grayed out (my problem)
  • On bottom: after a click on the tab, the label "home" is full white (as it should be on loading).
  • Note: the route is the same in both case "/home"

component:

export class NavbarComponent {
  // List of links
  links = [
    {label: 'Home', path:'/home'},
    {label: 'Design', path:'/design'}
  ];

  constructor() { }

template:

<nav mat-tab-nav-bar
  class="mat-elevation-z4"
  backgroundColor="primary">
  <a *ngFor="let link of links"
    #rla="routerLinkActive"
    mat-tab-link
    routerLinkActive
    [routerLink]="link.path"
    [routerLinkActiveOptions]="{exact: true}"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
1
angularangular-material2

1 Answers

2
votes

After further investigation, it is a intended behavior... That colors distinguish between the "rest" status and the "focus" status of the item.

mat-tab-link has an opacity of 0.6 by default. (grayed out effect see above)

on focus the opacity is set to 1 (fully white).

So in my case if I want to change this colors I can overwrite the css.

.mat-tab-link {
  opacity: 1;
}

.mat-tab-link:focus {
  color: #800080; /* obvious color for demo */
}