Fix plunkers and add tabs to the site (#70)

* Tab example

* Fix plunker, update examples

* Add example sources to assets/ so that they can be served directly for
plunker

* Footer font-size descrease

Author: jelbourn

package.json

@@ -16,14 +16,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
     "@angular/material": "angular/material2-builds",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
     "@angular/router": "~3.2.3",
     "core-js": "^2.4.1",
     "fs-extra": "^1.0.0",
@@ -34,7 +34,7 @@
     "zone.js": "^0.7.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.0",
+    "@angular/compiler-cli": "^2.4.1",
     "@types/jasmine": "^2.2.30",
     "@types/node": "^6.0.42",
     "angular-cli": "1.0.0-beta.24",

src/app/examples/example-module.ts

@@ -147,7 +147,7 @@ export const EXAMPLE_COMPONENTS = {
   },
   'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
   'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
-  'tabs-template-label': {title: 'Tabs with a label template', component: TabsTemplateLabelExample},
+  'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample},
   'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample},
   'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample},
   'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample},

src/app/examples/slider-configurable/slider-configurable-example.ts

@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
-  selector: 'configurable-slider-example',
+  selector: 'slider-configurable-example',
   templateUrl: './slider-configurable-example.html',
   styleUrls: ['./slider-configurable-example.css'],
   encapsulation: ViewEncapsulation.None,

src/app/examples/tabs-template-label/tabs-template-label-example.html

@@ -1,9 +1 @@
-<md-tab-group>
-  <md-tab>
-    <template md-tab-label>
-      I'm a <em>fancy</em> tab <md-icon>sentiment_very_satisfied</md-icon>
-    </template>
-    Content 1
-  </md-tab>
-  <md-tab label="Tab 2">Content 2</md-tab>
-</md-tab-group>
+More examples coming soon!

src/app/shared/documentation-items/documentation-items.ts

@@ -44,6 +44,7 @@ const DOCS = [
       {id: 'list', name: 'List', examples: ['list-sections']},
       {id: 'grid-list', name: 'Grid list', examples: ['grid-list-dynamic']},
       {id: 'card', name: 'Card', examples: ['card-fancy']},
+      {id: 'tabs', name: 'Tabs', examples: ['tabs-template-label']},
     ]
   },
   {

src/app/shared/footer/footer.scss

@@ -1,5 +1,6 @@
 .docs-footer {
   margin-top: 40px;
-  padding: 20px;
+  padding: 15px;
   text-align: center;
+  font-size: 12px;
 }

src/assets/documents/overview/tabs.html

@@ -4,7 +4,7 @@
 of the header, pagination controls appear to let the user scroll left and right across the labels.</p>
 <p>The active tab may be set using the <code>selectedIndex</code> input or when the user selects one of the
 tab labels in the header.</p>
-<div material-docs-example="tab-overview"></div>
+<div material-docs-example="tabs-overview"></div>
 <h3 id="events">Events</h3>
 <p>The <code>selectChange</code> output event is emitted when the active tab changes.  </p>
 <p>The <code>focusChange</code> output event is emitted when the user puts focus on any of the tab labels in

src/assets/examples/card-fancy-example-css.html

@@ -3,6 +3,6 @@
 }
 
 <span class="hljs-selector-class">.example-header-image</span> {
-  <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'shiba1.jpg'</span>);
+  <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'assets/img/examples/shiba1.jpg'</span>);
   <span class="hljs-attribute">background-size</span>: cover;
 }

src/assets/examples/card-fancy-example-html.html

@@ -4,7 +4,7 @@
     <span class="hljs-tag">&lt;<span class="hljs-name">md-card-title</span>&gt;</span>Shiba Inu<span class="hljs-tag">&lt;/<span class="hljs-name">md-card-title</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">md-card-subtitle</span>&gt;</span>Dog Breed<span class="hljs-tag">&lt;/<span class="hljs-name">md-card-subtitle</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">md-card-header</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">md-card-image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"shiba2.jpg"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">md-card-image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/examples/shiba2.jpg"</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">md-card-content</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

src/assets/examples/icon-svg-example-html.html

@@ -1 +1 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">md-icon</span> <span class="hljs-attr">svgSrc</span>=<span class="hljs-string">"ic_3d_rotation_black_24px.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-icon</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">md-icon</span> <span class="hljs-attr">svgIcon</span>=<span class="hljs-string">"thumbs-up"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-icon</span>&gt;</span>