diff --git a/README.md b/README.md index e9321be57f..9b4f8ebca1 100644 --- a/README.md +++ b/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` diff --git a/demos/component-docs/popups/popups.html b/demos/component-docs/popups/popups.html index 3babd71e5f..2cd9aac0c8 100644 --- a/demos/component-docs/popups/popups.html +++ b/demos/component-docs/popups/popups.html @@ -4,7 +4,9 @@ - + + + + + diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/popups/popups.ts index 8744fbb3c0..4b0fedf13b 100644 --- a/demos/component-docs/popups/popups.ts +++ b/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' }); } -} \ No newline at end of file + + 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" + }); + } +}