javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): add basic popup

Browse Source
This commit is contained in:
Drew Rygh
2015-10-07 12:48:39 -05:00
parent ef36fc2455
commit 8aa3e3e842
2 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demos/component-docs/index.ts
View File

@ -1,6 +1,6 @@
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic'; import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic'; import {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
import {NavigationDetailsPage} from 'navigation'; import {NavigationDetailsPage} from 'navigation';
import {TabsPage} from 'tabs'; import {TabsPage} from 'tabs';
@ -20,12 +20,14 @@ export class MainPage {
nav: NavController, nav: NavController,
actionSheet: ActionSheet, actionSheet: ActionSheet,
params: NavParams, params: NavParams,
popup: Popup,
modal: Modal, modal: Modal,
events: Events) events: Events)
{ {
this.params = params; this.params = params;
this.nav = nav; this.nav = nav;
this.modal = modal; this.modal = modal;
this.popup = popup;
this.actionSheet = actionSheet; this.actionSheet = actionSheet;
this.navDetailsPage = NavigationDetailsPage; this.navDetailsPage = NavigationDetailsPage;
this.demoModal = DemoModal; this.demoModal = DemoModal;
@ -41,7 +43,8 @@ export class MainPage {
zone.run(() => { zone.run(() => {
if (e.data) { if (e.data) {
var data = JSON.parse(e.data); var data = JSON.parse(e.data);
this.component.title = helpers.toTitleCase(data.hash.replace('-', ' ')); this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' '));
console.log(this.component.title);
if (this.component.title === 'Tabs') { if (this.component.title === 'Tabs') {
this.nav.setRoot(TabsPage); this.nav.setRoot(TabsPage);
} }
@ -102,6 +105,15 @@ export class MainPage {
}); });
} }
// **************************
// Popup
// **************************
showPopup() {
this.popup.alert("Popup Title").then(() => {
});
}
// ************************** // **************************
// Form // Form
// ************************** // **************************

29
demos/component-docs/main.html
View File

@ -125,30 +125,41 @@
</section> </section>
<section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }" class="section-padding"> <section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding">
<p> <p>
<button outline>Default</button> <button round>Default</button>
</p> </p>
<p> <p>
<button secondary outline>Secondary</button> <button secondary round>Secondary</button>
</p> </p>
<p> <p>
<button danger outline>Danger</button> <button danger round>Danger</button>
</p> </p>
<p> <p>
<button light outline>Light</button> <button light round>Light</button>
</p> </p>
<p> <p>
<button dark outline>Dark</button> <button dark round>Dark</button>
</p> </p>
</section> </section>
<section id="floating-action-buttons" [ng-class]="{hidden: component.title !== 'Floating Action Buttons' }" class="section-padding">
<p>
<button fab fab-top fab-right>
<icon add></icon>
</button>
</p>
</section>
<section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding"> <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
<p> <p>
@ -428,6 +439,12 @@
</section> </section>
<section id="popup" [ng-class]="{hidden: component.title !== 'Popups' }" class="section-padding">
<button block (click)="showPopup()">
Show Popup
</button>
</section>
<section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }"> <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
<ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true"> <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">