feat(tabs): support pagination in nav bar (#16055)

Adds support for pagination to `mat-tab-nav-bar` by moving some code around so that it can be reused from the `mat-tab-group`.

Fixes #2177.

Author: crisbeto

src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css

@@ -1,3 +1,4 @@
 .example-action-button {
-  margin-bottom: 8px;
+  margin-top: 8px;
+  margin-right: 8px;
 }

src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html

@@ -1,12 +1,13 @@
-<button mat-raised-button
-        class="example-action-button"
-        (click)="toggleBackground()">
-  Toggle background
-</button>
-
 <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>

src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts

@@ -16,4 +16,8 @@ export class TabNavBarBasicExample {
   toggleBackground() {
     this.background = this.background ? '' : 'primary';
   }
+
+  addLink() {
+    this.links.push(`Link ${this.links.length + 1}`);
+  }
 }

src/material/tabs/_tabs-common.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/noop-animation';
+@import '../core/style/vendor-prefixes';
 @import '../../cdk/a11y/a11y';
 
 $mat-tab-bar-height: 48px !default;
@@ -51,14 +52,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 }
 
-// Mixin styles for the top section of the view; contains the tab labels.
-@mixin tab-header {
-  overflow: hidden;
-  position: relative;
-  flex-shrink: 0;
-}
-
-// Mixin styles for the ink bar that displays near the active tab in the header.
+// The ink bar that displays under the active tab label
 @mixin ink-bar {
   $height: 2px;
 
@@ -78,3 +72,85 @@ $mat-tab-animation-duration: 500ms !default;
     height: 0;
   }
 }
+
+// Structural styles for a tab header. Used by both `mat-tab-header` and `mat-tab-nav-bar`.
+@mixin paginated-tab-header {
+  .mat-tab-header {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .mat-tab-header-pagination {
+    @include user-select(none);
+    position: relative;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    min-width: 32px;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: none;
+
+    .mat-tab-header-pagination-controls-enabled & {
+      display: flex;
+    }
+  }
+
+  // The pagination control that is displayed on the left side of the tab header.
+  .mat-tab-header-pagination-before, .mat-tab-header-rtl .mat-tab-header-pagination-after {
+    padding-left: 4px;
+    .mat-tab-header-pagination-chevron {
+      transform: rotate(-135deg);
+    }
+  }
+
+  // The pagination control that is displayed on the right side of the tab header.
+  .mat-tab-header-rtl .mat-tab-header-pagination-before, .mat-tab-header-pagination-after {
+    padding-right: 4px;
+    .mat-tab-header-pagination-chevron {
+      transform: rotate(45deg);
+    }
+  }
+
+  .mat-tab-header-pagination-chevron {
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    content: '';
+    height: 8px;
+    width: 8px;
+  }
+
+  .mat-tab-header-pagination-disabled {
+    box-shadow: none;
+    cursor: default;
+  }
+
+  .mat-tab-list {
+    flex-grow: 1;
+    position: relative;
+    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+}
+
+// Structural styles for the element that wraps the paginated header items.
+@mixin paginated-tab-header-item-wrapper {
+  display: flex;
+
+  [mat-align-tabs='center'] & {
+    justify-content: center;
+  }
+
+  [mat-align-tabs='end'] & {
+    justify-content: flex-end;
+  }
+}
+
+@mixin paginated-tab-header-container {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  z-index: 1;
+}

src/material/tabs/_tabs-theme.scss

@@ -96,7 +96,7 @@
 
 @mixin _mat-tabs-background($background-color) {
   // Set background color for the tab group
-  .mat-tab-header, .mat-tab-links {
+  .mat-tab-header, .mat-tab-links, .mat-tab-header-pagination {
     background-color: mat-color($background-color);
   }