Add a tabs page demonstrating md-tabs

Author: infomofo

app/index.html

@@ -28,8 +28,8 @@
 <div ng-include="'views/sidenav.html'"></div>
 <div layout="column" layout-fill flex>
   <div ng-include="'views/toolbar.html'"></div>
-  <md-content>
-    <div layout-align="center center" ng-view=""></div>
+  <md-content layout="column" layout-fill flex>
+    <div layout-align="center center" ng-view="" layout-fill flex></div>
   </md-content>
 </div>
 <!-- build:js(.) scripts/oldieshim.js -->

app/scripts/router.js

@@ -23,8 +23,8 @@ angular.module('yoAngularChromeApp')
       .when('/dialog', {
         templateUrl: 'views/dialog.html'
       })
-      .when('/subheader', {
-        templateUrl: 'views/list.html'
+      .when('/tabs', {
+        templateUrl: 'views/tabs.html'
       })
       .otherwise({
         redirectTo: '/'

app/views/dialog.html

@@ -1,4 +1,4 @@
-<md-content class="md-padding" flex>
+<md-content class="md-padding" flex layout="column" layout-margin>
   <h3>Ways to display various messages to a user</h3>
 
   <md-button class="md-fab md-fab-bottom-right" aria-label="Time">

app/views/sidenav.html

@@ -98,6 +98,21 @@ <h3>List</h3>
             </a>
           </md-item-content>
         </md-item>
+        <md-item>
+          <md-item-content layout="row">
+            <a class="menu-item menu-sub-item md-menu-item" ng-click="go('/tabs');" md-ink-ripple="#bbb" layout="row" layout-align="start center">
+              <div class="md-tile-right" layout-align="center center">
+                <i class="fa fa-fw fa-2x fa-tags"></i>
+              </div>
+              <div class="md-tile-content" layout-align="start center">
+                <h3>Tabs</h3>
+                <p>
+                  Demonstration of a pane with several tabs
+                </p>
+              </div>
+            </a>
+          </md-item-content>
+        </md-item>
       </md-list>
     </section>
   </md-content>

app/views/tabs.html

@@ -0,0 +1,22 @@
+<md-content class="md-padding" flex layout="column" layout-fill>
+  <h3>Tabs</h3>
+  <p>Click the tab header change between tab contents</p>
+
+  <md-tabs layout="column" flex md-stretch-tabs="always">
+    <md-tab label="1">
+      <div layout="column" layout-fill layout-align="space-around center">
+        <h1>A tab of content</h1>
+      </div>
+    </md-tab>
+    <md-tab label="Disabled" class="md-accent" disabled="true">
+      <div layout="column" layout-fill layout-align="space-around center">
+        <h1>A third tab of content</h1>
+      </div>
+    </md-tab>
+    <md-tab label="2" class="md-hue1">
+      <div layout="column" layout-fill  flex layout-align="space-around center" style="background-color:#fff000">
+        <h1>A second tab of content</h1>
+      </div>
+    </md-tab>
+  </md-tabs>
+</md-content>