docs(demos): update toolbar API demo and add navbar demo

references ionic-team/ionic-site#397

Author: brandyscarney

demos/navbar/index.ts

@@ -0,0 +1,14 @@
+import {App} from 'ionic/ionic';
+
+// Use the toolbar demo but pass in the demo name to change the title
+@App({
+  templateUrl: '../toolbar/main.html'
+})
+class ApiDemoApp {
+  constructor() {
+    this.demo = "Navbar";
+
+    this.favorites = "recent";
+    this.apps = "free";
+  }
+}

demos/toolbar/index.ts

@@ -3,4 +3,11 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {}
+class ApiDemoApp {
+  constructor() {
+    this.demo = "Toolbar";
+
+    this.favorites = "recent";
+    this.apps = "free";
+  }
+}

demos/toolbar/main.html

@@ -1,11 +1,11 @@
 <ion-toolbar>
-  <ion-title>Toolbar</ion-title>
+  <ion-title>{{demo}}</ion-title>
 </ion-toolbar>
 
 <ion-content>
 
   <ion-toolbar>
-    <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+    <ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
 
 
@@ -19,89 +19,75 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary>
+      <button>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-title>Defaults</ion-title>
+    <ion-title>Default Buttons</ion-title>
   </ion-toolbar>
 
+
   <ion-toolbar>
     <ion-buttons start>
-      <button solid>
+      <button danger>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button solid>
-        <ion-icon name="contact"></ion-icon>
-        Solid
+      <button secondary>
+        <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button solid secondary>
-        Help
-        <ion-icon name="help-circle"></ion-icon>
+      <button dark>
+        <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
+    <ion-title>Colored Buttons</ion-title>
   </ion-toolbar>
 
 
   <ion-toolbar>
     <ion-buttons start>
-      <button outline>
+      <button solid>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button outline>
-        <ion-icon name="star"></ion-icon>
-        Star
-      </button>
     </ion-buttons>
+    <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button secondary outline>
-        <ion-icon name="contact"></ion-icon>
+      <button solid secondary>
+        Help
+        <ion-icon name="help-circle"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-title>Outline</ion-title>
   </ion-toolbar>
 
 
   <ion-toolbar>
     <ion-buttons start>
-      <button>
+      <button outline>
         <ion-icon name="contact"></ion-icon>
-        Clear
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button>
-        Edit
-        <ion-icon name="create"></ion-icon>
+      <button outline secondary>
+        Help
+        <ion-icon name="help-circle"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-title>Icon/Color Attr</ion-title>
+    <ion-title>Outline</ion-title>
   </ion-toolbar>
 
 
+
   <ion-toolbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
-    <ion-buttons start>
-      <button>
-        <ion-icon name="star"></ion-icon>
-      </button>
-    </ion-buttons>
-    <ion-title>Left side menu toggle</ion-title>
+    <ion-title>Left Menu</ion-title>
   </ion-toolbar>
 
 
   <ion-toolbar>
-  <ion-buttons end>
-    <button #button1 (click)="buttonClick(button1)">
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-    <ion-title>Right side menu toggle</ion-title>
+    <ion-title>Right Menu</ion-title>
     <button menuToggle right>
       <ion-icon name="menu"></ion-icon>
     </button>
@@ -113,36 +99,36 @@
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-segment secondary>
-      <ion-segment-button>
-        Something
+    <ion-segment danger [(ngModel)]="favorites">
+      <ion-segment-button value="featured">
+        Featured
       </ion-segment-button>
-      <ion-segment-button>
-        Else
+      <ion-segment-button value="recent">
+        Recent
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
 
   <ion-toolbar>
-    <ion-segment>
-      <ion-segment-button>
-        Light
+    <ion-segment [(ngModel)]="apps">
+      <ion-segment-button value="paid">
+        Paid
       </ion-segment-button>
-      <ion-segment-button>
-        Toolbar
+      <ion-segment-button value="free">
+        Free
       </ion-segment-button>
-      <ion-segment-button>
-        Default Segment
+      <ion-segment-button value="top">
+        Top
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
 
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
 
-  <style>
-    .toolbar {
-      border-bottom: 1px solid black;
-      background: #eee !important;
-    }
-  </style>
+  <ion-toolbar primary>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
 
 </ion-content>

ionic/components/navbar/navbar.ts

@@ -86,6 +86,7 @@ class ToolbarBackground {
  * </ion-navbar>
  * ```
  *
+ * @demo /docs/v2/demos/navbar/
  * @see {@link ../../toolbar/Toolbar/ Toolbar API Docs}
  */
 @Component({