docs(demos/list): list api demo

demos/list/app.html

@@ -0,0 +1,24 @@
+<ion-menu [content]="content" id="leftMenu" side="left">
+
+  <ion-toolbar primary>
+    <ion-title>Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menu-close="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

demos/list/basic-list.html

@@ -1,4 +1,15 @@
-<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
+
+<ion-navbar *navbar class="show-navbar">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Basic List
+  </ion-title>
+
+</ion-navbar>
 
 <ion-content class="outer-content">
 
@@ -29,15 +40,6 @@
       </ion-note>
     </ion-item>
 
-  </ion-list>
-
-
-  <ion-list>
-
-    <ion-list-header>
-      List Header
-    </ion-list-header>
-
     <ion-switch checked="true">
       <icon color-wand item-left></icon>
       Magic
@@ -51,15 +53,6 @@
       </ion-note>
     </ion-item>
 
-  </ion-list>
-
-
-  <ion-list>
-
-    <ion-list-header>
-      List Header with text that is too long to fit inside the list header
-    </ion-list-header>
-
     <ion-item>
       <icon pizza item-left></icon>
       Pizza
@@ -87,18 +80,4 @@
   </ion-list>
 
 
-  <ion-list>
-
-    <ion-item>
-      <icon chatboxes item-left></icon>
-      New List, no header, Item 1
-    </ion-item>
-
-    <ion-item>
-      <icon chatboxes item-left></icon>
-      New List, no header, Item 2
-    </ion-item>
-
-  </ion-list>
-
 </ion-content>

demos/list/index.ts

@@ -1,7 +1,71 @@
-import {App} from 'ionic/ionic';
+import {App, IonicApp, Page, Platform} from 'ionic/ionic';
 
 
 @App({
-  templateUrl: 'main.html'
+  templateUrl: 'app.html'
 })
-class E2EApp {}
+class ApiDemoApp {
+
+    constructor(app: IonicApp, platform: Platform) {
+      this.app = app;
+      this.platform = platform;
+      this.rootPage = PageOne;
+      this.pages = [
+        { title: 'Basic List', component: PageOne },
+        { title: 'Inset List', component: PageTwo },
+        { title: 'No-lines List', component: PageThree },
+        { title: 'List Headers', component: PageFour },
+        { title: 'Sliding Items', component: PageFive },
+
+
+      ];
+
+    }
+
+    openPage(page) {
+      this.app.getComponent('leftMenu').close();
+      let nav = this.app.getComponent('nav');
+      nav.setRoot(page.component);
+    }
+
+}
+
+@Page({
+  templateUrl: 'basic-list.html',
+})
+export class PageOne{
+  constructor() {
+  }
+}
+
+@Page({
+  templateUrl: 'inset-list.html',
+})
+export class PageTwo {
+  constructor() {
+  }
+}
+
+@Page({
+  templateUrl: 'no-lines-list.html',
+})
+export class PageThree {
+  constructor() {
+  }
+}
+
+@Page({
+  templateUrl: 'list-headers.html',
+})
+export class PageFour {
+  constructor() {
+  }
+}
+
+@Page({
+  templateUrl: 'sliding-items.html',
+})
+export class PageFive {
+  constructor() {
+  }
+}

demos/list/inset-list.html

@@ -0,0 +1,83 @@
+
+<ion-navbar *navbar class="show-navbar">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Inset List
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content class="outer-content">
+
+  <ion-list inset>
+
+    <ion-list-header>
+      List Header
+    </ion-list-header>
+
+    <ion-switch>
+      <icon wifi item-left></icon>
+      Wifi
+    </ion-switch>
+
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+
+    <ion-switch checked="true">
+      <icon color-wand item-left></icon>
+      Magic
+    </ion-switch>
+
+    <ion-item>
+      <icon star item-left></icon>
+      Star status
+      <ion-note item-right>
+        Super
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+
+  </ion-list>
+
+
+</ion-content>

demos/list/list-headers.html

@@ -0,0 +1,37 @@
+
+<ion-navbar *navbar class="show-navbar">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    List Headers
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>Comedy</ion-list-header>
+    <ion-item>Airplane!</ion-item>
+    <ion-item>Caddyshack</ion-item>
+    <ion-item>Coming To America</ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>Action</ion-list-header>
+    <ion-item>Terminator II</ion-item>
+    <ion-item>The Empire Strikes Back</ion-item>
+    <ion-item>Blade Runner</ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>Horror</ion-list-header>
+    <ion-item>The Evil Dead</ion-item>
+    <ion-item>Poldergeist</ion-item>
+    <ion-item>Aliens</ion-item>
+  </ion-list>
+
+</ion-content>

demos/list/no-lines-list.html

@@ -0,0 +1,83 @@
+
+<ion-navbar *navbar class="show-navbar">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    No-lines List
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content class="outer-content">
+
+  <ion-list no-lines>
+
+    <ion-list-header>
+      List Header
+    </ion-list-header>
+
+    <ion-switch>
+      <icon wifi item-left></icon>
+      Wifi
+    </ion-switch>
+
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+
+    <ion-switch checked="true">
+      <icon color-wand item-left></icon>
+      Magic
+    </ion-switch>
+
+    <ion-item>
+      <icon star item-left></icon>
+      Star status
+      <ion-note item-right>
+        Super
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+
+  </ion-list>
+
+
+</ion-content>

demos/list/sliding-items.html

@@ -0,0 +1,59 @@
+
+<ion-navbar *navbar class="show-navbar">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Sliding Items
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-item-sliding #item>
+      <button ion-item text-wrap>
+        <h3>Max Lynch</h3>
+        <p>
+          Hey do you want to go to the game tonight?
+        </p>
+      </button>
+      <ion-item-options>
+        <button primary>Archive</button>
+        <button danger>Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <button ion-item text-wrap>
+        <h3>Adam Bradley</h3>
+        <p>
+          I think I figured out how to get more Mountain Dew
+        </p>
+      </button>
+      <ion-item-options>
+        <button primary>Archive</button>
+        <button danger>Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <button ion-item text-wrap>
+        <h3>Ben Sperry</h3>
+        <p>
+          I like paper
+        </p>
+      </button>
+      <ion-item-options>
+        <button primary>Archive</button>
+        <button danger>Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+  </ion-list>
+
+
+</ion-content>