javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 14:41:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Sink page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/app/test/sink/main.html
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-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
<ion-content> <ion-content>
<ion-list> <ion-list>

12
ionic/components/app/test/sink/pages/action-menu.ts
View File

@ -1,14 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2'; 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({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` 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"> <ion-content class="padding">
<h2>Action Menu</h2> <h2>Action Menu</h2>
@ -25,8 +27,10 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/
`, `,
directives: [NavbarTemplate, Navbar, Content] directives: [NavbarTemplate, Navbar, Content]
}) })
export class ActionMenuPage { export class ActionMenuPage extends SinkPage {
constructor(nav: NavController, actionMenu: ActionMenu) { constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
super(app);
this.nav = nav; this.nav = nav;
this.actionMenu = actionMenu; this.actionMenu = actionMenu;
} }

10
ionic/components/app/test/sink/pages/aside.ts
View File

@ -1,15 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2'; 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'; NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` 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"> <ion-content class="padding">
<h2>Aside</h2> <h2>Aside</h2>
@ -31,8 +32,9 @@ import {List, Item, ActionMenu, Modal, ModalRef,
`, `,
directives: [NavbarTemplate, Navbar, Content, List, Item] directives: [NavbarTemplate, Navbar, Content, List, Item]
}) })
export class AsidePage { export class AsidePage extends SinkPage {
constructor() { constructor(app: IonicApp) {
super(app);
} }
openMenu() { openMenu() {

12
ionic/components/app/test/sink/pages/button.ts
View File

@ -1,14 +1,16 @@
import {Component, View, NgIf} from 'angular2/angular2'; 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({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` 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"> <ion-content class="padding">
@ -58,8 +60,9 @@ import {Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/io
`, `,
directives: [NavbarTemplate, Navbar, Content, NgIf] directives: [NavbarTemplate, Navbar, Content, NgIf]
}) })
export class ButtonPage { export class ButtonPage extends SinkPage {
constructor(nav: NavController) { constructor(app: IonicApp, nav: NavController) {
super(app);
this.nav = nav; this.nav = nav;
} }
@ -72,6 +75,7 @@ export class ButtonPage {
this.clicked = false; this.clicked = false;
}, 500); }, 500);
} }
} }
new Routable(ButtonPage, { new Routable(ButtonPage, {

12
ionic/components/app/test/sink/sink-page.ts Normal file
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();
}
}