feat(tabs): align with 2018 material design spec

Aligns the tabs component with the latest Material design spec and adds the ability to align the tab labels in the middle or the end of the container.

Author: crisbeto

src/lib/tabs/tab-header.scss

@@ -82,4 +82,12 @@
 
 .mat-tab-labels {
   display: flex;
+
+  [mat-align-tabs='center'] & {
+    justify-content: center;
+  }
+
+  [mat-align-tabs='end'] & {
+    justify-content: flex-end;
+  }
 }

src/lib/tabs/tabs.md

@@ -83,7 +83,7 @@ the `active` property to determine which tab is currently active. The correspond
 ### Lazy Loading
 By default, the tab contents are eagerly loaded. Eagerly loaded tabs
 will initalize the child components but not inject them into the DOM
-until the tab is activated. 
+until the tab is activated.
 
 
 If the tab contains several complex child components or the tab's contents
@@ -108,6 +108,12 @@ with the `matTabContent` attribute.
 </mat-tab-group>
 ```
 
+### Label alignment
+If you want to align the tab labels in the center or towards the end of the container, you can
+do so using the `[mat-align-tabs]` attribute.
+
+<!-- example(tab-group-align) -->
+
 ### Accessibility
 Tabs without text or labels should be given a meaningful label via `aria-label` or
 `aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.

src/material-examples/tab-group-align/tab-group-align-example.css

@@ -0,0 +1,3 @@
+.mat-tab-group {
+  margin-bottom: 48px;
+}

src/material-examples/tab-group-align/tab-group-align-example.html

@@ -0,0 +1,17 @@
+<mat-tab-group mat-align-tabs="start">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="center">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="end">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>

src/material-examples/tab-group-align/tab-group-align-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with aligned labels
+ */
+@Component({
+  selector: 'tab-group-align-example',
+  templateUrl: 'tab-group-align-example.html',
+  styleUrls: ['tab-group-align-example.css'],
+})
+export class TabGroupAlignExample {}