docs(demos): add new list demos

demos/component-docs/helpers.ts

@@ -45,7 +45,9 @@ import {BasicListsPage,
         IconListsPage,
         BasicDividersPage,
         BasicInsetListsPage,
-        ListHeadersPage} from './lists/lists';
+        ListHeadersPage,
+        ThreeLineListsPage,
+        ThumbnailListsPage} from './lists/lists';
 
 import {MenusPage} from './menus/menus';
 import {ModalsPage} from './modals/modals';
@@ -150,6 +152,8 @@ export function getPageFor(hash) {
         'list-dividers': BasicDividersPage,
         'inset-list': BasicInsetListsPage,
         'list-headers': ListHeadersPage,
+        'three-line-list': ThreeLineListsPage,
+        'thumbnail-list': ThumbnailListsPage,
 
         'menus': MenusPage,
         'modals': ModalsPage,

demos/component-docs/lists/lists.ts

@@ -61,4 +61,24 @@ export class AvatarListsPage {
     constructor() {
 
     }
-}
+}
+
+@Page({
+    templateUrl: 'lists/three-lists.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ThreeLineListsPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+    templateUrl: 'lists/thumbnail-lists.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class ThumbnailListsPage {
+    constructor() {
+
+    }
+}

demos/component-docs/lists/three-lists.html

@@ -0,0 +1,72 @@
+
+<ion-navbar *navbar class="show-navbar android-attr">
+  <ion-title>Three-line Items</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header">
+  <ion-list>
+
+    <ion-header>
+    Today
+    </ion-header>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-finn.png">
+      </ion-avatar>
+      <h2>Finn</h2>
+      <h3>Don't Know What To Do!</h3>
+      <p>I've had a pretty messed up day. If we just...</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-han.png">
+      </ion-avatar>
+      <h2>Han</h2>
+      <h3>Look, Kid</h3>
+      <p>I've got enough on my plate as it is, and I...</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-rey.png">
+      </ion-avatar>
+      <h2>Rey</h2>
+      <h3>Found Something</h3>
+      <p>Was scavaging around the other day and...</p>
+    </ion-item>
+
+    <ion-header>
+    Last Week
+    </ion-header>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-poe.png">
+      </ion-avatar>
+      <h2>Poe</h2>
+      <h3>New Ride</h3>
+      <p>I just upgraded my ship! Next time you're...</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-ben.png">
+      </ion-avatar>
+      <h2>Ben</h2>
+      <h3>Move Along</h3>
+      <p>These aren't the droids you're looking for...</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar item-left>
+        <img src="img/avatar-leia.png">
+      </ion-avatar>
+      <h2>Leia</h2>
+      <h3>You're My Only Hope</h3>
+      <p>I've placed information vital to the survival...</p>
+    </ion-item>
+
+  </ion-list>
+</ion-content>

demos/component-docs/lists/thumbnail-lists.html

@@ -0,0 +1,73 @@
+
+<ion-navbar *navbar class="show-navbar android-attr">
+  <ion-title>Thumbnails</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header">
+  <ion-list>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-totoro.png">
+      </ion-thumbnail>
+      <h2>My Neighbor Totoro</h2>
+      <p>Hayao Miyazaki • 1988</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-rotla.png">
+      </ion-thumbnail>
+      <h2>Raiders of the Lost Ark</h2>
+      <p>Steven Spielberg • 1981</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-ghostbusters.png">
+      </ion-thumbnail>
+      <h2>Ghostbusters</h2>
+      <p>Ivan Reitman • 1984</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-batman.png">
+      </ion-thumbnail>
+      <h2>Batman</h2>
+      <p>Tim Burton • 1988</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-bttf.png">
+      </ion-thumbnail>
+      <h2>Back to the Future</h2>
+      <p>Robert Zemeckis • 1985</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-esb.png">
+      </ion-thumbnail>
+      <h2>The Empire Strikes Back</h2>
+      <p>Irvin Kershner • 1980</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-terminator.png">
+      </ion-thumbnail>
+      <h2>The Terminator</h2>
+      <p>James Cameron • 1984</p>
+      <button clear item-right>View</button>
+    </ion-item>
+
+  </ion-list>
+</ion-content>