From 78464a20bfe768a8aa55da05078ce969e21674b9 Mon Sep 17 00:00:00 2001
From: David Sautter <dasois@users.noreply.github.com>
Date: Wed, 30 Nov 2016 20:47:43 +0100
Subject: [PATCH] feat(tabs): md-stretch-tabs (#1909)

Stretch tabs grow until they fill the tab group width.

Closes #1353
---
 src/demo-app/tabs/tabs-demo.html | 9 +++++++++
 src/lib/tabs/tab-group.scss      | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 3d8943a2971..fe5deabe9a4 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -97,6 +97,15 @@
   </md-tab>
 </md-tab-group>
 
+<h1>Stretched Tabs</h1>
+
+<md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
+  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
+    <template md-tab-label>{{tab.label}}</template>
+    {{tab.content}}
+  </md-tab>
+</md-tab-group>
+
 
 <h1>Async Tabs</h1>
 
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index 1b4dee349f5..ff7b36338f7 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -25,6 +25,11 @@
   }
 }
 
+:host[md-stretch-tabs] .md-tab-label {
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
 // The ink bar that displays next to the active tab
 md-ink-bar {
   @include ink-bar;