docs(segment): clean up docs on segment, update demo

the demo has been changed to show multiple segments in use, instead of
a lot of segments thrown on the page.

fixes driftyco/ionic-site#658

demos/segment/index.ts

@@ -7,18 +7,83 @@ import { ionicBootstrap } from 'ionic-angular';
   templateUrl: 'main.html'
 })
 class ApiDemoPage {
-  appType = "paid";
+  appType = "Paid";
-  safari = "links";
+  safari = "Shared Links";
-  news = "local";
+  weather = "sunny";
-  favorites = "recent";
 
-  purchased = "all";
+  apps = {
-  mapStyle = "sat";
+    "Paid": [
-  teslaModels = "X";
+      {
+        name: 'Monopoly',
+        price: '$0.99'
+      },
+      {
+        name: 'Angry Birds',
+        price: '$2.99'
+      }
+    ],
+    "Free": [
+      {
+        name: 'Snapchat',
+        price: 'GET'
+      },
+      {
+        name: 'Instagram',
+        price: 'OPEN'
+      }
+    ],
+    "Top": [
+      {
+        name: 'Spotify',
+        price: 'OPEN'
+      },
+      {
+        name: 'Pandora',
+        price: 'GET'
+      }
+    ]
+  };
 
-  pet = "puppies";
+  items = {
-  calendar = "day";
+    "Bookmarks": [
-  proxy = "auto";
+      {
+        name: 'Favorites',
+        icon: 'ios-star-outline'
+      },
+      {
+        name: 'History',
+        icon: 'ios-clock-outline'
+      }
+    ],
+    "Reading List": [
+      {
+        name: 'Terms of Service',
+        icon: 'create'
+      },
+      {
+        name: 'User Guide',
+        icon: 'book'
+      }
+    ],
+    "Shared Links": [
+      {
+        name: 'Ionic Framework',
+        icon: 'ionic'
+      },
+      {
+        name: 'Learn Angular',
+        icon: 'logo-angular'
+      }
+    ]
+  };
+
+  getItems(type) {
+    return this.apps[type];
+  }
+
+  getSafariItems(type) {
+    return this.items[type];
+  }
 }
 
 

demos/segment/main.html

@@ -1,147 +1,75 @@
 <ion-header>
 
-  <ion-navbar>
+  <ion-navbar no-border-bottom>
     <ion-title>Segment</ion-title>
   </ion-navbar>
 
   <ion-toolbar no-border-top>
     <ion-segment [(ngModel)]="appType">
-      <ion-segment-button value="paid">
+      <ion-segment-button value="Paid">
         Paid
       </ion-segment-button>
-      <ion-segment-button value="free">
+      <ion-segment-button value="Free">
         Free
       </ion-segment-button>
-      <ion-segment-button value="top">
+      <ion-segment-button value="Top">
         Top
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
 
-  <ion-toolbar no-border-top>
-    <ion-segment [(ngModel)]="news" secondary>
-      <ion-segment-button value="worldwide">
-        Worldwide
-      </ion-segment-button>
-      <ion-segment-button value="local">
-        Local
-      </ion-segment-button>
-      <ion-segment-button value="headlines">
-        Headlines
-      </ion-segment-button>
-    </ion-segment>
-  </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>
-      </ion-segment-button>
-      <ion-segment-button value="history">
-        <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button value="links">
-        <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-
-  <ion-toolbar no-border-top>
-    <ion-segment [(ngModel)]="favorites" danger>
-      <ion-segment-button value="featured">
-        Featured
-      </ion-segment-button>
-      <ion-segment-button value="recent">
-        Recent
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-
 </ion-header>
 
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>{{ appType }}</ion-list-header>
+    <ion-item *ngFor="let item of getItems(appType)">
+      {{ item.name }}
+      <button outline item-right>{{ item.price }}</button>
+    </ion-item>
+  </ion-list>
 
-<ion-content padding>
+  <ion-card>
-
+    <ion-card-header>
-  <p>Segments can be placed in a toolbar or anywhere in the content.</p>
+      {{ safari }}
-
+    </ion-card-header>
-  <ion-segment [(ngModel)]="purchased" primary margin-bottom>
+    <ion-card-content>
-    <ion-segment-button value="all">
+      <ion-segment [(ngModel)]="safari" dark>
-      All
+        <ion-segment-button value="Bookmarks">
-    </ion-segment-button>
+          <ion-icon name="book"></ion-icon>
-    <ion-segment-button value="not">
+        </ion-segment-button>
-      Not on This Phone
+        <ion-segment-button value="Reading List">
-    </ion-segment-button>
+          <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
-  </ion-segment>
+        </ion-segment-button>
-
+        <ion-segment-button value="Shared Links">
-  <ion-segment [(ngModel)]="mapStyle" secondary margin-bottom>
+          <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
-    <ion-segment-button value="standard">
+        </ion-segment-button>
-      Standard
+      </ion-segment>
-    </ion-segment-button>
+      <ion-list style="margin: 0" inset>
-    <ion-segment-button value="hybrid">
+        <button ion-item *ngFor="let sItem of getSafariItems(safari)">
-      Hybrid
+          <ion-icon item-left [name]="sItem.icon" primary></ion-icon>
-    </ion-segment-button>
+          {{ sItem.name }}
-    <ion-segment-button value="sat">
+        </button>
-      Satellite
+      </ion-list>
-    </ion-segment-button>
+    </ion-card-content>
-  </ion-segment>
+  </ion-card>
-
-  <ion-segment [(ngModel)]="teslaModels" danger margin-bottom>
-    <ion-segment-button value="S">
-      Model S
-    </ion-segment-button>
-    <ion-segment-button value="X">
-      Model X
-    </ion-segment-button>
-    <ion-segment-button value="3">
-      Model 3
-    </ion-segment-button>
-  </ion-segment>
-
 </ion-content>
 
-
 <ion-footer>
-
+  <ion-toolbar no-border-bottom>
-  <ion-toolbar no-border-bottom primary>
+    <ion-title>
-    <ion-segment [(ngModel)]="pet" light>
+      Weather: {{ weather == 'sunny' ? '96' : '77' }}°
-      <ion-segment-button value="puppies">
+      <ion-icon [name]="weather" danger></ion-icon>
-        Puppies
+    </ion-title>
+  </ion-toolbar>
+  <ion-toolbar no-border-top no-border-bottom>
+    <ion-segment [(ngModel)]="weather" danger>
+      <ion-segment-button value="sunny">
+        Sunny
       </ion-segment-button>
-      <ion-segment-button value="kittens">
+      <ion-segment-button value="rainy" checked>
-        Kittens
+        Rainy
-      </ion-segment-button>
-      <ion-segment-button value="ducklings">
-        Ducklings
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
-
-  <ion-toolbar no-border-bottom dark>
-    <ion-segment [(ngModel)]="calendar" primary>
-      <ion-segment-button value="list">
-        List
-      </ion-segment-button>
-      <ion-segment-button value="day">
-        Day
-      </ion-segment-button>
-      <ion-segment-button value="month" checked>
-        Month
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-
-  <ion-toolbar no-border-bottom danger>
-    <ion-segment [(ngModel)]="proxy" light>
-      <ion-segment-button value="off">
-        Off
-      </ion-segment-button>
-      <ion-segment-button value="manual">
-        Manual
-      </ion-segment-button>
-      <ion-segment-button value="auto">
-        Auto
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-
 </ion-footer>

src/components/segment/segment.ts

@@ -8,34 +8,31 @@ import { isPresent, isTrueProperty } from '../../util/util';
  * @name SegmentButton
  * @description
  * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
+ *
  * @usage
+ *
  * ```html
- * <ion-segment [(ngModel)]="relationship" primary>
+ * <ion-content>
- *   <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
+ *   <!-- Segment buttons with icons -->
- *     Friends
+ *   <ion-segment [(ngModel)]="icons" secondary>
- *   </ion-segment-button>
+ *     <ion-segment-button value="camera">
- *   <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
+ *       <ion-icon name="camera"></ion-icon>
- *     Enemies
- *   </ion-segment-button>
- * </ion-segment>
- *```
- *
- * Or with `FormBuilder`
- *
- *```html
- * <form [ngFormModel]="myForm">
- *   <ion-segment ngControl="mapStyle" danger>
- *     <ion-segment-button value="standard">
- *       Standard
  *     </ion-segment-button>
- *     <ion-segment-button value="hybrid">
+ *     <ion-segment-button value="bookmark">
- *       Hybrid
+ *       <ion-icon name="bookmark"></ion-icon>
- *     </ion-segment-button>
- *     <ion-segment-button value="sat">
- *       Satellite
  *     </ion-segment-button>
  *   </ion-segment>
- * </form>
+ *
+ *   <!-- Segment buttons with text -->
+ *   <ion-segment [(ngModel)]="relationship" primary>
+ *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
+ *       Friends
+ *     </ion-segment-button>
+ *     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
+ *       Enemies
+ *     </ion-segment-button>
+ *   </ion-segment>
+ * </ion-content>
  * ```
  *
  *
@@ -128,34 +125,47 @@ export class SegmentButton {
  * You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
  *
  *
- * @usage
  * ```html
- * <ion-segment [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)" danger>
+ * <!-- Segment in a header -->
- *   <ion-segment-button value="friends">
+ * <ion-header>
- *     Friends
+ *   <ion-toolbar>
- *   </ion-segment-button>
+ *     <ion-segment [(ngModel)]="icons" secondary>
- *   <ion-segment-button value="enemies">
+ *       <ion-segment-button value="camera">
- *     Enemies
+ *         <ion-icon name="camera"></ion-icon>
- *   </ion-segment-button>
+ *       </ion-segment-button>
- * </ion-segment>
+ *       <ion-segment-button value="bookmark">
- *```
+ *         <ion-icon name="bookmark"></ion-icon>
+ *       </ion-segment-button>
+ *     </ion-segment>
+ *   </ion-toolbar>
+ * </ion-header>
  *
- * Or with `FormBuilder`
+ * <ion-content>
- *
+ *   <!-- Segment in content -->
- *```html
+ *   <ion-segment [(ngModel)]="relationship" primary>
- * <form [ngFormModel]="myForm">
+ *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
- *   <ion-segment ngControl="mapStyle" danger>
+ *       Friends
- *     <ion-segment-button value="standard">
- *       Standard
  *     </ion-segment-button>
- *     <ion-segment-button value="hybrid">
+ *     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
- *       Hybrid
+ *       Enemies
- *     </ion-segment-button>
- *     <ion-segment-button value="sat">
- *       Satellite
  *     </ion-segment-button>
  *   </ion-segment>
- * </form>
+ *
+ *   <!-- Segment in a form -->
+ *   <form [ngFormModel]="myForm">
+ *     <ion-segment ngControl="mapStyle" danger>
+ *       <ion-segment-button value="standard">
+ *         Standard
+ *       </ion-segment-button>
+ *       <ion-segment-button value="hybrid">
+ *         Hybrid
+ *       </ion-segment-button>
+ *       <ion-segment-button value="sat">
+ *         Satellite
+ *       </ion-segment-button>
+ *     </ion-segment>
+ *   </form>
+ * </ion-content>
  * ```
  *
  *