docs(demos): update API demos so they all have ion-navs

- add spacing between imports
- alphabetize imports
- removed app.html files in favor of an inline ion-nav
- cleaned up config demo so it uses proper syntax
- use file name main.html for the first page for the demo
- name the app ApiDemoApp and first page ApiDemoPage
- replace the ion-toolbars with ion-navbars

closes #7019
closes driftyco/ionic-site#647

demos/segment/index.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { Component } from '@angular/core';
+
+import { ionicBootstrap } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoApp {
+class ApiDemoPage {
   appType = "paid";
   safari = "links";
   news = "local";
@@ -20,4 +21,12 @@ class ApiDemoApp {
   proxy = "auto";
 }
 
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
 ionicBootstrap(ApiDemoApp);

demos/segment/main.html

@@ -1,10 +1,10 @@
 <ion-header>
 
-  <ion-toolbar>
+  <ion-navbar>
     <ion-title>Segment</ion-title>
-  </ion-toolbar>
+  </ion-navbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="appType">
       <ion-segment-button value="paid">
         Paid
@@ -18,7 +18,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="news" secondary>
       <ion-segment-button value="worldwide">
         Worldwide
@@ -32,7 +32,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
       <ion-segment-button value="bookmarks">
         <ion-icon name="book"></ion-icon>
@@ -46,7 +46,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar>
+  <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="favorites" danger>
       <ion-segment-button value="featured">
         Featured
@@ -102,7 +102,7 @@
 
 <ion-footer>
 
-  <ion-toolbar primary>
+  <ion-toolbar no-border-bottom primary>
     <ion-segment [(ngModel)]="pet" light>
       <ion-segment-button value="puppies">
         Puppies
@@ -116,7 +116,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar dark>
+  <ion-toolbar no-border-bottom dark>
     <ion-segment [(ngModel)]="calendar" primary>
       <ion-segment-button value="list">
         List
@@ -130,7 +130,7 @@
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar danger>
+  <ion-toolbar no-border-bottom danger>
     <ion-segment [(ngModel)]="proxy" light>
       <ion-segment-button value="off">
         Off
@@ -144,4 +144,4 @@
     </ion-segment>
   </ion-toolbar>
 
-</ion-footer>
+</ion-footer>