MatTabNav Add scroll animation for horinzontal scrolling

Viewed 58

I would like to change the default animation when scrolling left and right. Maybe a fade animation or something like that. I am trying to access to the MatTabNav to change or remove the default animation. And the I should define triggers for the new animation?

Any idea how can I achieve that?

component.ts

<nav mat-tab-nav-bar [backgroundColor]="background">
  <a mat-tab-link *ngFor="let link of links"
     (click)="activeLink = link"
     [active]="activeLink == link"> {{link}} </a>
  <a mat-tab-link disabled>Disabled Link</a>
</nav>

<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
  Toggle background
</button>
<button mat-raised-button class="example-action-button" (click)="addLink()">
  Add link
</button>

component.html

import {Component} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {MatTabNav} from '@angular/material/tabs';

/**
 * @title Basic use of the tab nav bar
 */
@Component({
  selector: 'tab-nav-bar-basic-example',
  templateUrl: 'tab-nav-bar-basic-example.html',
})
export class TabNavBarBasicExample {
  links = ['First', 'Second', 'Third'];
  activeLink = this.links[0];
  background: ThemePalette = undefined;
  @ViewChild(MatTabNav) matTabNav: MatTabNav;

  toggleBackground() {
    this.background = this.background ? undefined : 'primary';
  }

  addLink() {
    this.links.push(`Link ${this.links.length + 1}`);
  }
}
0 Answers
Related