feat(tabs): md-stretch-tabs (#1909)

Stretch tabs grow until they fill the tab group width.

Closes #1353
This commit is contained in:
David Sautter
2016-11-30 20:47:43 +01:00
committed by tinayuangao
parent bc6cf6edee
commit 78464a20bf
2 changed files with 14 additions and 0 deletions
+9
View File
@@ -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>
+5
View File
@@ -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;