feat(toolbar): add scroll shrink option

 - and scroll shrink demo

examples/all.ts

@@ -11,6 +11,7 @@ import CardInlineActions from './components/card/inline_actions';
 import ButtonBasicUsage from './components/button/basic_usage';
 import CardActionButtons from './components/card/action_buttons';
 import ToolbarBasicUsage from './components/toolbar/basic_usage';
+import ToolbarScrollShrink from './components/toolbar/scroll_shrink';
 import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
 import ProgressLinearBasicUsage from './components/progress_linear/basic_usage';
 import RadioBasicUsage from './components/radio/basic_usage';
@@ -26,7 +27,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   ButtonBasicUsage,
   RadioBasicUsage,
   SwitchBasicUsage,
-  ToolbarBasicUsage,
+  ToolbarBasicUsage, ToolbarScrollShrink,
   ProgressCircularBasicUsage,
   ProgressLinearBasicUsage
 // --=> EXAMPLES_EXPORT_END

examples/components/toolbar/scroll_shrink.html

@@ -0,0 +1,30 @@
+<div layout="column" class="scroll-shrink">
+
+  <md-toolbar md-scroll-shrink>
+    <div class="md-toolbar-tools">
+      <h3>
+        <span>{{ title }}</span>
+      </h3>
+    </div>
+  </md-toolbar>
+
+  <md-content flex>
+
+    <md-list>
+
+      <md-list-item class="md-3-line" *ngFor="#item of todos">
+        <img [src]="item.face" [alt]="item.who" class="md-avatar">
+
+        <div class="md-list-item-text">
+          <h3>{{ item.what }}</h3>
+          <h4>{{ item.who }}</h4>
+          <p>{{ item.notes }}</p>
+        </div>
+        <md-divider inset></md-divider>
+      </md-list-item>
+
+    </md-list>
+
+  </md-content>
+
+</div>

examples/components/toolbar/scroll_shrink.scss

@@ -0,0 +1,3 @@
+div.scroll-shrink {
+  height:600px;
+}

examples/components/toolbar/scroll_shrink.ts

@@ -0,0 +1,33 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from '../../base';
+
+interface ITodo {
+  face:string;
+  what:string;
+  who:string;
+  notes:string;
+}
+
+@Component({selector: 'toolbar-scroll-shrink'})
+@View({
+  templateUrl: 'examples/components/toolbar/scroll_shrink.html',
+  styleUrls: ['examples/components/toolbar/scroll_shrink.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class ToolbarScrollShrink {
+  title: string = 'My App Title';
+  imagePath: string = 'public/images/avatars/avatar5.svg';
+  todos: ITodo[] = [];
+
+  constructor() {
+    for (var i = 0; i < 15; i++) {
+      this.todos.push({
+        face: this.imagePath,
+        what: "Brunch this weekend?",
+        who: "Min Li Chan",
+        notes: "I'll be in your neighborhood doing errands."
+      });
+    }
+  }
+
+}