feat(tabs): add dynamic height example

 - fix styles for dynamic height

examples/components/tabs/dynamic_height.scss

@@ -0,0 +1,16 @@
+tabs-dynamic-height {
+  background-color: transparent !important;
+  md-tabs {
+    background: #f6f6f6;
+    border: 1px solid #e1e1e1;
+    md-tabs-wrapper {
+      background: white;
+    }
+    md-content {
+      background-color: transparent;
+    }
+  }
+  h1:first-child {
+    margin-top: 0;
+  }
+}

examples/components/tabs/dynamic_height.ts

@@ -1,11 +1,13 @@
 import {View, Component} from 'angular2/core';
 import {MATERIAL_DIRECTIVES} from '../../base';
+import {ViewEncapsulation} from "angular2/core";
 
 @Component({selector: 'tabs-dynamic-height'})
 @View({
   templateUrl: 'examples/components/tabs/dynamic_height.html',
-  //styleUrls: ['examples/components/tabs/dynamic_height.scss'],
-  directives: [MATERIAL_DIRECTIVES]
+  styleUrls: ['examples/components/tabs/dynamic_height.css'],
+  directives: [MATERIAL_DIRECTIVES],
+  encapsulation: ViewEncapsulation.None
 })
 export default class TabsDynamicHeight {
 }

examples/components/tabs/dynamic_tabs.scss

@@ -1,45 +1,61 @@
-form {
-  h2.md-subhead {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    font-weight: 500;
-    text-transform: uppercase;
-    line-height: 35px;
-    white-space: nowrap;
-  }
-}
+tabs-dynamic-tabs {
 
+  form {
+    h2.md-subhead {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+      font-weight: 500;
+      text-transform: uppercase;
+      line-height: 35px;
+      white-space: nowrap;
+    }
+  }
 
-//
+  md-content {
+    background-color: transparent !important;
+    md-tabs {
+      border: 1px solid #e1e1e1;
+      md-tab-content {
+        background-color: #f6f6f6 !important;
+      }
+      md-tabs-wrapper {
+        background: white;
+      }
+    }
+    h1:first-child {
+      margin-top: 0;
+    }
+  }
+  md-input-container {
+    padding-bottom: 0;
+  }
+  .remove-tab {
+    margin-bottom: 40px;
+  }
+  .demo-tab > div > div {
+    padding: 25px;
+    box-sizing: border-box;
+  }
+  .edit-form input {
+    width: 100%;
+  }
+  md-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  md-tab[disabled] {
+    opacity: 0.5;
+  }
+  label {
+    text-align: left;
+  }
 
-md-input-container {
-  padding-bottom: 0;
-}
-.remove-tab {
-  margin-bottom: 40px;
-}
-.demo-tab > div > div {
-  padding: 25px;
-  box-sizing: border-box;
-}
-.edit-form input {
-  width: 100%;
-}
-md-tabs {
-  border-bottom: 1px solid rgba(0,0,0,0.12);
-}
-md-tab[disabled] {
-  opacity: 0.5;
-}
-label {
-  text-align: left;
-}
+  .long > input {
+    width: 264px;
+  }
+  .md-button.add-tab {
+    transform: translateY(5px);
+  }
 
-.long > input {
-  width: 264px;
-}
-.md-button.add-tab {
-  transform: translateY(5px);
 }

examples/components/tabs/dynamic_tabs.ts

@@ -1,6 +1,7 @@
 import {View, Component} from 'angular2/core';
 import {MATERIAL_DIRECTIVES} from '../../base';
 import {Input} from "angular2/core";
+import {ViewEncapsulation} from "angular2/core";
 
 export interface ITabData {
   title:string;
@@ -12,19 +13,14 @@ export interface ITabData {
 @View({
   templateUrl: 'examples/components/tabs/dynamic_tabs.html',
   styleUrls: ['examples/components/tabs/dynamic_tabs.css'],
+  encapsulation: ViewEncapsulation.None,
   directives: [MATERIAL_DIRECTIVES]
 })
 export default class TabsDynamicTabs {
   public tabs: ITabData[] = [
-    {title: 'One', content: "TODO: Tabs will become paginated if there isn't enough room for them."},
-    {title: 'Two', content: "TODO: You can swipe left and right on a mobile device to change tabs."},
-    {title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
-    {title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
-    {title: 'Five', content: "If you remove a tab, it will try to select a new one."},
-    {title: 'Six', content: "TODO: There's an ink bar that follows the selected tab, you can turn it off if you want."},
-    {title: 'Seven', content: "If you set the disabled attribute on a tab, it becomes unselectable."},
-    {title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
-    {title: 'Nine', content: "TODO: If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."}
+    {title: 'One', content: "You can add tabs dynamically by filling in the form below this."},
+    {title: 'Two', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
+    {title: 'Three', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"}
   ];
 
   selected = null;

ng2-material/components/tabs/tabs.html

@@ -4,8 +4,9 @@
     <md-pagination-wrapper>
       <md-tab-item tabindex="-1"
                    class="md-tab"
-                   (click)="clickTabButton(pane,$event)"
+                   (click)="onTabClick(pane,$event)"
                    [class.md-active]="selected == pane"
+                   [disabled]="pane.disabled"
                    [style.max-width]="maxTabWidth + 'px'"
                    *ngFor="#pane of panes"
                    role="tab">
@@ -16,7 +17,8 @@
   </md-tabs-canvas>
 </md-tabs-wrapper>
 <md-tabs-content-wrapper>
-  <md-tab-content role="tabpanel" [class.md-no-scroll]="mdNoScroll">
+  <md-tab-content role="tabpanel" class="md-active"
+                  [class.md-no-scroll]="mdNoScroll">
     <ng-content></ng-content>
   </md-tab-content>
 </md-tabs-content-wrapper>

ng2-material/components/tabs/tabs.scss

@@ -36,7 +36,7 @@ md-tabs {
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
-  &:not(.md-no-tab-content):not(.md-dynamic-height) {
+  &:not(.md-no-tab-content):not([md-dynamic-height]) {
     min-height: 200 + $tabs-header-height;
   }
   &[md-align-tabs="bottom"] {
@@ -54,7 +54,7 @@ md-tabs {
       bottom: $tabs-header-height;
     }
   }
-  &.md-dynamic-height {
+  &[md-dynamic-height] {
     md-tabs-content-wrapper {
       min-height: 0;
       position: relative;
@@ -75,7 +75,7 @@ md-tabs {
       border-width: 0 0 1px;
       border-style: solid;
     }
-    &:not(.md-dynamic-height) {
+    &:not([md-dynamic-height]) {
       md-tabs-content-wrapper {
         top: $tabs-header-height + 1;
       }

ng2-material/components/tabs/tabs.ts

@@ -1,11 +1,23 @@
-import {Component, Directive, Input, QueryList,
-  ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core';
-import {AfterContentInit} from "angular2/core";
-import {Attribute} from "angular2/core";
+import {
+  Component, Directive, Input, QueryList, Attribute, AfterContentInit,
+  ViewContainerRef, TemplateRef, ContentChildren
+} from 'angular2/core';
 import {isPresent} from "angular2/src/facade/lang";
-import {OnChanges} from "angular2/core";
 import {Ink} from "../../core/util/ink";
-import {ElementRef} from "angular2/core";
+import {ViewEncapsulation} from "angular2/core";
+
+
+// TODO: behaviors to test
+//  - Tabs will become paginated if there isn't enough room for them
+//  - You can swipe left and right on a mobile device to change tabs
+//  - You can bind the selected tab via the selected attribute on the md-tabs element
+//  - If you set the selected tab binding to -1, it will leave no tab selected
+//  - If you remove a tab, it will try to select a new one
+//  - There's an ink bar that follows the selected tab, you can turn it off if you want
+//  - If you set the disabled attribute on a tab, it becomes unselectable
+//  - If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs
+
+
 @Directive({
   selector: '[md-tab]'
 })
@@ -34,17 +46,18 @@ export class MdTab {
     return this._active;
   }
 }
+
 @Component({
   selector: 'md-tabs',
-  templateUrl: 'ng2-material/components/tabs/tabs.html'
+  templateUrl: 'ng2-material/components/tabs/tabs.html',
+  encapsulation: ViewEncapsulation.None
 })
-export class MdTabs implements AfterContentInit, OnChanges {
+export class MdTabs implements AfterContentInit {
   @ContentChildren(MdTab) panes: QueryList<MdTab>;
 
   @Input() mdNoScroll: boolean = false;
 
-  constructor(private _element: ElementRef,
-              @Attribute('mdNoScroll') noScroll: string) {
+  constructor(@Attribute('mdNoScroll') noScroll: string) {
     this.mdNoScroll = isPresent(noScroll);
   }
 
@@ -75,7 +88,7 @@ export class MdTabs implements AfterContentInit, OnChanges {
     this.panes.toArray().forEach((p: MdTab) => p.active = p == pane);
   }
 
-  clickTabButton(pane: MdTab, event?) {
+  onTabClick(pane: MdTab, event?) {
     if (event && Ink.canApply(event.target)) {
       Ink.rippleEvent(event.target, event);
     }
@@ -89,9 +102,4 @@ export class MdTabs implements AfterContentInit, OnChanges {
       }
     }, 0);
   }
-
-  ngOnChanges(changes: {}): any {
-
-  }
-
 }