docs(demos): add content to modal demo

Closes #449

demos/component-docs/modals/basic/modal-content.html

@@ -0,0 +1,47 @@
+<ion-toolbar class="android-attr">
+  <ion-title>
+    Description
+  </ion-title>
+  <ion-nav-items primary>
+    <button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
+      Cancel
+    </button>
+    <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
+      <icon close></icon>
+    </button>
+  </ion-nav-items>
+</ion-toolbar>
+
+
+  <ion-content class="has-header">
+
+    <ion-list>
+
+        <ion-item>
+          <ion-avatar item-left>
+            <img src="{{character.image}}">
+          </ion-avatar>
+          <h2>{{character.name}}</h2>
+          <p>{{character.quote}}</p>
+        </ion-item>
+
+        <div *ng-for="#item of character['items']">
+          <ion-item>
+            {{item.title}}
+            <ion-note item-right>
+              {{item.note}}
+            </ion-note>
+          </ion-item>        
+        </div>
+
+
+    </ion-list>
+
+  </ion-content>
+
+
+
+
+
+
+

demos/component-docs/modals/basic/modals-content.html

@@ -1,13 +0,0 @@
-
-<ion-content padding>
-    <button block danger (click)="closeModal()">
-      <icon close></icon>
-      Close Modal
-    </button>
-</ion-content>
-
-
-
-
-
-

demos/component-docs/modals/basic/pages.ts

@@ -1,5 +1,5 @@
-import {App, IonicApp, Animation, Modal, NavController, Page, Events} from 'ionic/ionic';
+import {App, IonicApp, Animation, Modal, Platform, NavController, Page, Events} from 'ionic/ionic';
-import {forwardRef} from 'angular2/angular2';
+import {forwardRef, NgFor} from 'angular2/angular2';
 import * as helpers from '../../helpers';
 
 
@@ -7,35 +7,75 @@ import * as helpers from '../../helpers';
   templateUrl: 'modals/basic/template.html',
   directives: [forwardRef(() => helpers.AndroidAttribute)]
 })
-class ModalsFirstPage {
+class ModalsInitialPage {
 
   constructor(
     nav: NavController,
     modal: Modal,
-    events: Events
   ) {
     this.nav = nav;
     this.modal = modal;
   }
 
-  openModal() {
+  openModal(characterNum) {
-    this.modal.open(ModalsContentPage);
+    this.modal.open(ModalsContentPage, characterNum);
   }
 
+
 }
 
 @Page({
-  templateUrl: 'modals/basic/modals-content.html',
+  templateUrl: 'modals/basic/modal-content.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
+  directives: [NgFor, forwardRef(() => helpers.AndroidAttribute)]
 
 })
 class ModalsContentPage {
 
     constructor(
         modal: Modal,
-    events: Events
+        platform: Platform,
     ) {
         this.modal = modal;
+        if (platform.is('android')) {
+            this.currentPlatform = 'android';
+        } else {
+            this.currentPlatform = 'ios';
+        }
+
+        var characters = [
+            {
+                name: 'Gollum',
+                quote: 'Sneaky little hobbitses!',
+                image: 'img/avatar-gollum.jpg',
+                items: [
+                    { title: 'Race', note: 'Hobbit' },
+                    { title: 'Culture', note: 'River Folk' },
+                    { title: 'Alter Ego', note: 'Smeagol' }
+                ]
+            },
+            {
+                name: 'Frodo',
+                quote: 'Go back, Sam! I\'m going to Mordor alone!',
+                image: 'img/avatar-frodo.jpg',
+                items: [
+                    { title: 'Race', note: 'Hobbit' },
+                    { title: 'Culture', note: 'Shire Folk' },
+                    { title: 'Weapon', note: 'Sting' }
+                ]
+            },
+            {
+                name: 'Samwise Gamgee',
+                quote: 'What we need is a few good taters.',
+                image: 'img/avatar-samwise.jpg',
+                items: [
+                    { title: 'Race', note: 'Hobbit' },
+                    { title: 'Culture', note: 'Shire Folk' },
+                    { title: 'Nickname', note: 'Sam' }
+                ]
+            }
+        ];
+        this.character = characters[this.modal._defaults.charNum];
+    
   }
 
   closeModal() {
@@ -51,7 +91,7 @@ class ModalsContentPage {
 })
 export class BasicPage {
   constructor(modal: Modal) {
-    this.rootView = ModalsFirstPage;
+    this.rootView = ModalsInitialPage;
     this.modal = modal;
   }
   onPageWillLeave() {
@@ -61,3 +101,5 @@ export class BasicPage {
     }
   }
 }
+
+

demos/component-docs/modals/basic/template.html

@@ -1,10 +1,23 @@
 
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar class="android-attr">
   <ion-title>Modals</ion-title>
 </ion-navbar>
 
-<ion-content padding class="has-header">
+<ion-content class="has-header">
-   <button block (click)="openModal()">
+
-    Show Modal
+  <ion-list>
-  </button>
+    <ion-header>
+      Hobbits
+    </ion-header>
+    <a ion-item (click)="openModal({charNum: 0})">
+      Gollum
+    </a>
+    <a ion-item (click)="openModal({charNum: 1})">
+      Frodo Baggins
+    </a>
+    <a ion-item (click)="openModal({charNum: 2})">
+      Sam
+    </a>
+  </ion-list>
+
 </ion-content>