feat(examples): inline markup and form builder input demos

examples/components/input/basic_usage.html

@@ -1,5 +1,9 @@
 <div layout="column" class="md-inline-form">
 
+  <md-toolbar md-hero layout="row" layout-align="center center" layout-align-gt-md="end end">
+    <i class="secret-project" md-icon>person</i>
+  </md-toolbar>
+
   <md-content layout-padding>
     <div>
       <form name="userForm">
@@ -62,12 +66,13 @@
           <md-input-container class="md-block" flex-gt-sm>
             <label>Postal Code</label>
             <input md-input ngControl="postalCode" [(value)]="user.postalCode" placeholder="12345"
-              required mdPattern="^[0-9]{5}$" #postalCode="ngForm" mdMaxLength="5">
+                   required mdPattern="^[0-9]{5}$" #postalCode="ngForm" mdMaxLength="5">
 
             <div [md-messages]="postalCode" role="alert">
               <div md-message="required">You must supply a postal code.</div>
               <div md-message="mdPattern">That doesn't look like a valid postal code.</div>
-              <div md-message="mdMaxLength">Don't use the long version silly...we don't need to be that specific...</div>
+              <div md-message="mdMaxLength">Don't use the long version silly...we don't need to be that specific...
+              </div>
             </div>
           </md-input-container>
         </div>

examples/components/input/basic_usage.scss

@@ -1,3 +1,18 @@
+@import '../../../ng2-material/core/style/variables';
+@import '../../../ng2-material/core/style/mixins';
+@import '../../../ng2-material/core/style/default-theme';
+
+.secret-project {
+  width: 256px;
+  height: 256px;
+  font-size: 256px;
+  color: md-color($md-primary,900,0.6);
+}
+
+md-toolbar[md-hero] {
+  margin-bottom: 40px;
+}
+
 md-input-container > select {
   margin: 0;
   order: 2;

examples/components/input/form_builder.html

@@ -1,11 +1,22 @@
 <div layout="column">
 
+  <md-toolbar md-hero layout="row" layout-align="center center" layout-align-gt-md="end end">
+    <h1>{{description}}</h1>
+    <a class="secret-project" href="https://materialdesignicons.com/icon/rocket" target="_blank">
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z"/>
+      </svg>
+    </a>
+  </md-toolbar>
+
   <md-content layout-padding>
+
     <form [ngFormModel]="projectForm">
 
       <md-input-container class="md-block">
         <label for="description">Description</label>
-        <input md-input ngControl="description" id="description" [(value)]="description">
+        <input md-input ngControl="description" id="description" [(value)]="model.description">
         <div md-messages="description">
           <div md-message="required">This is required.</div>
           <div md-message="maxlength">The name has to be less than 30 characters long.</div>
@@ -14,23 +25,23 @@
 
       <md-input-container class="md-block">
         <label for="clientName">Client Name</label>
-        <input md-input ngControl="clientName" id="clientName" [(value)]="clientName">
+        <input md-input ngControl="clientName" id="clientName" [(value)]="model.clientName">
         <div md-messages="clientName" role="alert">
           <div md-message="required">This is required.</div>
         </div>
       </md-input-container>
 
       <md-input-container class="md-block">
         <label for="clientEmail">Client Email</label>
-        <input md-input type="email" ngControl="clientEmail" id="clientEmail" [(value)]="clientEmail"/>
+        <input md-input type="email" ngControl="clientEmail" id="clientEmail" [(value)]="model.clientEmail"/>
         <div md-messages="clientEmail" role="alert">
           <div md-message>Your email must be between 10 and 100 characters long and look like an e-mail address.</div>
         </div>
       </md-input-container>
 
       <md-input-container class="md-block">
         <label for="rate">Hourly Rate (USD)</label>
-        <input md-input type="number" step="any" ngControl="rate" id="rate" [(value)]="rate" #rateInput/>
+        <input md-input type="number" step="any" ngControl="rate" id="rate" [(value)]="model.rate" #rateInput/>
         <div md-messages="rate" role="alert">
           <div md-message="mdNumberRequired">
             You've got to charge something! You can't just <b>give away</b> a Missile Defense

examples/components/input/form_builder.scss

@@ -0,0 +1,13 @@
+@import '../../../ng2-material/core/style/variables';
+@import '../../../ng2-material/core/style/mixins';
+@import '../../../ng2-material/core/style/default-theme';
+
+md-toolbar[md-hero] {
+  margin-bottom: 40px;
+}
+
+.secret-project {
+  width: 256px;
+  height: 256px;
+  fill: white;
+}

examples/components/input/form_builder.ts

@@ -5,15 +5,17 @@ import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from 'angular2/c
 @Component({selector: 'input-form-builder'})
 @View({
   templateUrl: 'examples/components/input/form_builder.html',
+  styleUrls: ['examples/components/input/form_builder.css'],
   directives: [MATERIAL_DIRECTIVES, FORM_DIRECTIVES]
 })
 export class InputFormBuilder {
   projectForm: ControlGroup;
-  clientName: string = '';
-  clientEmail: string = '';
-  description: string = 'Nuclear Missile Defense System';
-  rate: number = 500;
-
+  model = {
+    clientName: '',
+    clientEmail: '',
+    description: 'Nuclear Missile Defense System',
+    rate: 500
+  };
   constructor(fb: FormBuilder) {
     this.projectForm = fb.group({
       'clientName': ['', Validators.required],