feat(tabs): refactors tabs to function closer to spec

docs/app/css/style.css

@@ -518,3 +518,6 @@ md-content.demo-source-container > hljs > pre > code.highlight {
     border: 1px solid #fff;
   }
 }
+demo-source-tabs md-tabs-content-wrapper {
+  height: 400px;
+}

src/components/tabs/demoDynamicTabs/index.html

@@ -1,21 +1,19 @@
 <div ng-controller="AppCtrl" class="sample" layout="column">
 
-  <md-tabs md-selected="selectedIndex" flex>
+  <md-tabs md-selected="selectedIndex" md-border-bottom>
     <md-tab ng-repeat="tab in tabs"
             ng-disabled="tab.disabled"
             label="{{tab.title}}">
-
-    <div class="demo-tab tab{{$index%4}}" layout="column" layout-align="space-around center">
+      <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
         <div ng-bind="tab.content"></div>
-          <md-button class="md-primary md-raised" ng-click="removeTab( tab )">
-            Remove Tab
-          </md-button>
+        <br/>
+        <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
       </div>
     </md-tab>
   </md-tabs>
 
   <form ng-submit="addTab(tTitle,tContent)" layout="column" style="padding-top:20px;padding-left:20px;">
-    <div layout="row" layout-sm="column" layout-margin >
+    <div layout="row" layout-sm="column" layout-margin style="min-height: 75px;">
       <md-input-container>
         <label for="activeIndex">Active Index</label>
         <input type="text" id="activeIndex" ng-model="selectedIndex" disabled>
@@ -27,7 +25,7 @@
       </md-input-container>
     </div>
 
-    <div layout="row" layout-sm="column" layout-margin >
+    <div layout="row" layout-sm="column" layout-margin style="min-height: 75px;">
       <span class="title">Add a new Tab:</span>
       <md-input-container>
         <label for="label">Label</label>
@@ -41,5 +39,4 @@
     </div>
   </form>
 
-
 </div>

src/components/tabs/demoDynamicTabs/script.js

@@ -1,39 +1,40 @@
 angular.module('tabsDemo2', ['ngMaterial'])
-  .controller('AppCtrl', function ($scope, $log) {
-    var tabs = [
-      { title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
-      { title: 'Two', content: "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: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
-      { title: 'Seven', content: "If you set ng-disabled on a tab, it becomes unselectable. If the currently selected tab becomes disabled, it will try to select the next tab."},
-      { title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
-      { title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
-      { title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
-    ];
+    .controller('AppCtrl', function ($scope, $log) {
+      var tabs = [
+            { title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
+            { title: 'Two', content: "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: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
+            { title: 'Seven', content: "If you set ng-disabled on a tab, it becomes unselectable. If the currently selected tab becomes disabled, it will try to select the next tab."},
+            { title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
+            { title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
+            { title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
+          ],
+          selected = null,
+          previous = null;
 
-    $scope.tabs = tabs;
-    $scope.selectedIndex = 2;
 
-    $scope.$watch('selectedIndex', function(current, old){
-      if ( old && (old != current)) $log.debug('Goodbye ' + tabs[old].title + '!');
-      if ( current )                $log.debug('Hello ' + tabs[current].title + '!');
-    });
+      $scope.tabs = tabs;
+      $scope.selectedIndex = 2;
+
+      $scope.$watch('selectedIndex', function(current, old){
+        previous = selected;
+        selected = tabs[current];
+        if ( old && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
+        if ( current )                $log.debug('Hello ' + selected.title + '!');
+      });
 
-    $scope.addTab = function (title, view) {
-      view = view || title + " Content View";
-      tabs.push({ title: title, content: view, disabled: false});
-    };
+      $scope.addTab = function (title, view) {
+        view = view || title + " Content View";
+        tabs.push({ title: title, content: view, disabled: false});
+      };
 
-    $scope.removeTab = function (tab) {
-      for (var j = 0; j < tabs.length; j++) {
-        if (tab.title == tabs[j].title) {
-          $scope.tabs.splice(j, 1);
-          break;
-        }
-      }
-    };
+      $scope.removeTab = function (tab) {
+        var index = tabs.indexOf(tab);
+        tabs.splice(index, 1);
+      };
 
-  });
+    });
 

src/components/tabs/demoDynamicTabs/style.css → src/components/tabs/demoDynamicTabs/style.scss

@@ -1,60 +1,42 @@
-.sample {
-  height:500px;
-}
-
 .remove-tab {
   margin-bottom: 40px;
 }
-
-.demo-tab {
-  height: 300px;
-  text-align: center;
-}
-
-.demo-tab button {
-  margin-bottom: 40px;
+.demo-tab > div > div {
+  padding: 25px;
+  box-sizing: border-box;
 }
-
-.tab0, .tab1, .tab2, .tab3 {
+.edit-form input {
+  width: 100%;
 }
-
-md-tabs, md-tabs .md-header {
-  border-bottom: 1px solid #D8D8D8;
+md-tabs {
+  border-bottom: 1px solid rgba(0,0,0,0.12);
 }
 md-tab[disabled] {
   opacity: 0.5;
 }
-
-
-.md-tab-content {
-  background: white;
+label {
+  text-align: left;
 }
 
 .title {
   padding-top: 8px;
   padding-right: 8px;
   text-align: left;
   text-transform: uppercase;
-  color: #888;
   margin-top: 24px;
 }
-
-
 [layout-align] > * {
   margin-left: 8px;
 }
-
 form > [layout] > * {
   margin-left: 8px;
 }
 form > [layout] > span {
   padding-top:2px
 }
-
 .long > input {
   width: 264px;
 }
-
 .md-button.add-tab {
   margin-top:20px;
   max-height:30px !important;

src/components/tabs/demoStaticTabs/index.html

@@ -1,48 +1,29 @@
 <div ng-controller="AppCtrl" class="tabsdemoStaticTabs sample">
 
     <md-tabs class="md-accent" md-selected="data.selectedIndex">
-      <md-tab id="tab1" aria-controls="tab1-content">
-        Item One
+      <md-tab id="tab1">
+        <md-tab-label>Item One</md-tab-label>
+        <md-tab-template>
+          View for Item #1 <br/>
+          data.selectedIndex = 0;
+        </md-tab-template>
       </md-tab>
-      <md-tab id="tab2" aria-controls="tab2-content"
-              ng-disabled="data.secondLocked">
-        {{data.secondLabel}}
+      <md-tab id="tab2" ng-disabled="data.secondLocked">
+        <md-tab-label>{{data.secondLabel}}</md-tab-label>
+        <md-tab-template>
+          View for Item #2 <br/>
+          data.selectedIndex = 1;
+        </md-tab-template>
       </md-tab>
-      <md-tab id="tab3" aria-controls="tab3-content">
-        Item Three
+      <md-tab id="tab3">
+        <md-tab-label>Item Three</md-tab-label>
+        <md-tab-template>
+          View for Item #3 <br/>
+          data.selectedIndex = 2;
+        </md-tab-template>
       </md-tab>
     </md-tabs>
 
-    <ng-switch on="data.selectedIndex" class="tabpanel-container">
-        <div role="tabpanel"
-             id="tab1-content"
-             aria-labelledby="tab1"
-             ng-switch-when="0"
-             md-swipe-left="next()"
-             md-swipe-right="previous()" >
-            View for Item #1<br/>
-            data.selectedIndex = 0
-        </div>
-        <div role="tabpanel"
-             id="tab2-content"
-             aria-labelledby="tab2"
-             ng-switch-when="1"
-             md-swipe-left="next()"
-             md-swipe-right="previous()" >
-            View for {{data.secondLabel}}<br/>
-            data.selectedIndex = 1
-        </div>
-        <div role="tabpanel"
-             id="tab3-content"
-             aria-labelledby="tab3"
-             ng-switch-when="2"
-             md-swipe-left="next()"
-             md-swipe-right="previous()" >
-            View for Item #3<br/>
-            data.selectedIndex = 2
-        </div>
-    </ng-switch>
-
     <div class="after-tabs-area" layout="row" layout-sm="column" layout-margin layout-align="left center">
         <md-input-container>
           <label for="selectedIndex">Selected Index</label>

src/components/tabs/demoStaticTabs/style.scss

@@ -0,0 +1,29 @@
+.sample {
+  height:450px;
+  md-tab-content {
+    padding: 25px;
+    &:nth-child(1) {
+      background-color: #42A5F5;
+    }
+    &:nth-child(2) {
+      background-color: #689F38;
+    }
+    &:nth-child(3) {
+      background-color: #26C6DA;
+    }
+  }
+  .after-tabs-area {
+    padding: 25px;
+    > span {
+      margin-top:25px;
+      padding-right: 15px;
+      vertical-align: middle;
+      line-height: 30px;
+      height: 35px;
+    }
+    > md-checkbox {
+      margin-top:26px;
+      margin-left:0px;
+    }
+  }
+}