docs(popup): updated popup docs and README for building demos

README.md

@@ -45,6 +45,16 @@ Ionic 2 is based on the new [2.x version of AngularJS](https://angular.io/), and
 3. Go to [http://localhost:8000/e2e/](http://localhost:8000/e2e/)
 4. Stay cool
 
+### Building & Running Component Demos
+
+1. Clone the `ionic-site` repo in `ionic2/dist/`: `git clone git@github.com:driftyco/ionic-site.git`
+ * You may need to remove the existing directory first: `rm -rf ionic2/dist/ionic-site`
+2. Run `gulp demos:all` from the top level directory
+3. Navigate to `ionic2/dist/ionic-site` and run `npm install`
+4. Run `gulp watch` in this directory
+5. A browser should launch at `http://localhost:3000` at which point you can navigate to `http://localhost:3000/docs/v2/components/`
+6. Any time you make a change to the demos repeat step 2
+
 ### Running Snapshot
 
 1. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor`

demos/component-docs/popups/popups.html

@@ -4,7 +4,9 @@
 </ion-navbar>
 
 <ion-content padding class="has-header">
-  <button block (click)="showPopup()">
-    Show Popup
-  </button>
+  <button (click)="doAlert()">Alert</button>
+  <button (click)="doPrompt()">Prompt</button>
+  <button (click)="doConfirm()">Confirm</button>
 </ion-content>
+
+<ion-overlay></ion-overlay>

demos/component-docs/popups/popups.ts

@@ -9,8 +9,30 @@ export class PopupsPage {
     this.popup = popup;
   }
 
-  showPopup() {
-    this.popup.alert("Popup Title").then(() => {
+  doAlert() {
+    this.popup.alert({
+      title: "New Friend!",
+      template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+      cssClass: 'my-alert'
     });
   }
-}
+
+  doPrompt() {
+    this.popup.prompt({
+      title: "New Album",
+      template: "Enter a name for this new album you're so keen on adding",
+      inputPlaceholder: "Title",
+      okText: "Save"
+    });
+  }
+
+  doConfirm() {
+    this.popup.confirm({
+      title: "Use this lightsaber?",
+      subTitle: "You can't exchange lightsabers",
+      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+      cancelText: "Disagree",
+      okText: "Agree"
+    });
+  }
+}