mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
Sink page
This commit is contained in:
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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() {
|
||||
|
||||
|
@ -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, {
|
||||
|
12
ionic/components/app/test/sink/sink-page.ts
Normal file
12
ionic/components/app/test/sink/sink-page.ts
Normal 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();
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user