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

feat(menu): right side menus

Browse Source
This commit is contained in:
Adam Bradley
2015-09-22 12:36:42 -05:00
parent 3b7d261290
commit 1a60540f2b
9 changed files with 88 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/menu/test/basic/index.ts
View File

@ -36,9 +36,9 @@ class E2EApp {
];
}
openPage(menu, page) {
openPage(page) {
// close the menu when clicking a link from the menu
menu.close();
this.app.getComponent('leftMenu').close();
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario

30
ionic/components/menu/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-menu #menu [content]="content">
<ion-menu [content]="content" id="leftMenu">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,11 +8,35 @@
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menu-toggle no-forward-icon class="e2eCloseMenu">
<button ion-item menu-toggle="leftMenu" no-forward-icon class="e2eCloseMenu">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu side="right" [content]="content" id="rightMenu">
<ion-toolbar secondary>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menu-toggle="rightMenu" no-forward-icon class="e2eCloseMenu">
Close Menu
</button>

12
ionic/components/menu/test/basic/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<a menu-toggle>
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
@ -21,19 +21,23 @@
</button>
</ion-nav-items>
<a menu-toggle secondary>
<a menu-toggle="rightMenu" secondary>
<icon menu></icon>
</a>
</ion-navbar>
<ion-content #content padding>
<ion-content padding>
<h3>Page 1</h3>
<p>
<button class="e2eContentToggleMenu" menu-toggle>Toggle Menu</button>
<button class="e2eContentToggleMenu" menu-toggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button class="e2eContentToggleMenu" menu-toggle="rightMenu">Toggle Right Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

6
ionic/components/menu/test/basic/page2.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<a menu-toggle>
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
@ -11,12 +11,12 @@
</ion-navbar>
<ion-content #content padding>
<ion-content padding>
<h3>Page 2</h3>
<p>
<button menu-toggle class="e2eContentToggleMenu">Toggle Menu</button>
<button menu-toggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
</p>
<p>

6
ionic/components/menu/test/basic/page3.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar>
<a menu-toggle>
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
@ -12,12 +12,12 @@
</ion-navbar>
<ion-content #content padding>
<ion-content padding>
<h3>Page 3</h3>
<p>
<button menu-toggle>Toggle Menu</button>
<button menu-toggle="leftMenu">Toggle Left Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>