Sink page

This commit is contained in:
Max Lynch
2015-07-06 18:15:12 -05:00
parent 033abfa640
commit 1445013d0a
5 changed files with 35 additions and 13 deletions

View File

@ -1,4 +1,4 @@
<ion-aside #aside [content]="content">
<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
<ion-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
<ion-content>
<ion-list>

View File

@ -1,14 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2';
import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {IonicApp, ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-title>Action Menu</ion-title></ion-navbar>
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Action Menu</h2>
@ -25,8 +27,10 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/
`,
directives: [NavbarTemplate, Navbar, Content]
})
export class ActionMenuPage {
constructor(nav: NavController, actionMenu: ActionMenu) {
export class ActionMenuPage extends SinkPage {
constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
super(app);
this.nav = nav;
this.actionMenu = actionMenu;
}

View File

@ -1,15 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2';
import {List, Item, ActionMenu, Modal, ModalRef,
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-title>Asides</ion-title></ion-navbar>
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Aside</h2>
@ -31,8 +32,9 @@ import {List, Item, ActionMenu, Modal, ModalRef,
`,
directives: [NavbarTemplate, Navbar, Content, List, Item]
})
export class AsidePage {
constructor() {
export class AsidePage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
openMenu() {

View File

@ -1,14 +1,16 @@
import {Component, View, NgIf} from 'angular2/angular2';
import {Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {IonicApp, Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-title>Buttons</ion-title></ion-navbar>
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
<ion-content class="padding">
@ -58,8 +60,9 @@ import {Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/io
`,
directives: [NavbarTemplate, Navbar, Content, NgIf]
})
export class ButtonPage {
constructor(nav: NavController) {
export class ButtonPage extends SinkPage {
constructor(app: IonicApp, nav: NavController) {
super(app);
this.nav = nav;
}
@ -72,6 +75,7 @@ export class ButtonPage {
this.clicked = false;
}, 500);
}
}
new Routable(ButtonPage, {

View File

@ -0,0 +1,12 @@
/**
* Simple wrapper page for the side menu toggle.
*/
export class SinkPage {
constructor(app: IonicApp) {
this.app = app;
}
toggleMenu() {
let aside = this.app.getComponent('mainMenu');
aside.toggle();
}
}