javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): inject MenuController to control app menus

Browse Source 
Menu has been improved to make it easier to open, close, toggle and
enable menus.
Instead of injecting `IonicApp` to find the menu component, you now
inject
`MenuController`.

Was:

```
constructor(app: IonicApp) {
  this.app = app;
}
openMenu() {
  this.app.getComponent('leftMenu').close();
}
```

Now:

To programmatically interact with any menu, you can inject the
`MenuController`
provider into any component or directive. This makes it easy get ahold
of and
control the correct menu instance. By default Ionic will find the app's
menu
without requiring a menu ID. An id attribute on an `<ion-menu>` is only
required
if there are multiple menus on the same side. If there are multiple
menus, but
on different sides, you can use the name of the side to get the correct
menu

If there's only one menu:

```
constructor(menu: MenuController) {
  this.menu = menu;
}
openMenu() {
  this.menu.close();
}
```

If there is a menu on the left and right side:

```
toggleMenu() {
  this.menu.toggle('left');
}
```

If there are multiple menus on the same side:

```
<ion-menu id="myMenuId" side="left">...</ion-menu>
<ion-menu id="otherMenuId" side="left">...</ion-menu>

closeMenu() {
  this.menu.close('myMenuId');
}
```
This commit is contained in:
Adam Bradley
2016-02-04 16:47:02 -06:00
parent 2178638659
commit acf12cdd15
25 changed files with 365 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
import {App, IonicApp, MenuController, Page, NavController, Alert} from 'ionic/ionic';
@Page({
@@ -38,7 +38,7 @@ class Page2 {
})
class E2EApp {
constructor(private app: IonicApp) {
constructor(private app: IonicApp, private menu: MenuController) {
this.rootView = Page1;
this.changeDetectionCount = 0;
@@ -56,7 +56,7 @@ class E2EApp {
nav.setRoot(page.component).then(() => {
// wait for the root page to be completely loaded
// then close the menu
this.app.getComponent('leftMenu').close();
this.menu.close('left');
});
}

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

@@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-menu [content]="content" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@@ -12,51 +12,51 @@
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
<button ion-item menuClose="left" detail-none>
Close Menu
</button>
@@ -66,7 +66,7 @@
</ion-menu>
<ion-menu [content]="content" id="rightMenu" side="right">
<ion-menu [content]="content" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
@@ -80,55 +80,55 @@
{{p.title}}
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
<button ion-item menuClose="right" detail-none>
Close Menu
</button>

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

@@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
@@ -21,7 +21,7 @@
</button>
</ion-buttons>
<button menuToggle="rightMenu" right secondary>
<button menuToggle="right" right secondary>
<ion-icon name="menu"></ion-icon>
</button>
@@ -33,11 +33,11 @@
<h3>Page 1</h3>
<p>
<button class="e2eContentToggleMenu" menuToggle="leftMenu">Toggle Left Menu</button>
<button class="e2eContentToggleMenu" menuToggle="left">Toggle Left Menu</button>
</p>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="right">Toggle Right Menu</button>
</p>
<ion-card>

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

@@ -1,7 +1,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
@@ -16,7 +16,7 @@
<h3>Page 2</h3>
<p>
<button menuToggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
<button menuToggle class="e2eContentToggleMenu">Toggle Left Menu</button>
</p>
<p>

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

@@ -5,7 +5,7 @@
Menu
</ion-title>
<button menuToggle="rightMenu" right>
<button menuToggle="right" right>
<ion-icon name="menu"></ion-icon>
</button>
@@ -17,7 +17,7 @@
<h3>Page 3</h3>
<p>
<button menuToggle="rightMenu">Toggle Right Menu</button>
<button menuToggle="right">Toggle Right Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>