Ionic 2 - 同时有多个菜单(右 - 左) [英] Ionic 2 - Multiple menu at the same time (right - left)
问题描述
情况:
我的 Ionic 2 应用程序中有一个正常工作的菜单.我需要添加一个左侧菜单.我已经尝试过,但到目前为止还没有成功.这是我的尝试:
I have a working right menu in my Ionic 2 app. I need to add a left menu. I have tried but was unsuccessfull so far. This is my attempt:
代码:
使用此代码,右侧菜单可以正常工作,但左侧菜单不显示.
With this code the right menu is properly working, but it doesn't appear the left menu.
app.html:
<ion-menu [content]="content" id="menu1">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" id="menu2">
<ion-header>
<ion-toolbar color="danger">
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.component.ts:
constructor(
public platform: Platform,
public menu: MenuController
) {
this.initializeApp();
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'Login', component: LoginPage },
];
this.menu.enable(true, 'menu1');
this.menu.enable(true, 'menu2');
}
问题:
如何让两个菜单(左右菜单)同时正常工作?
How can I have two menu - left and right - properly working at the same time?
推荐答案
就像你看到的here,需要添加 side="left"
和 side="right"
之类的这个:
Just like you can see here, you need to add side="left"
and side="right"
like this:
<ion-menu [content]="content" side="left" id="menu1">...</ion-menu>
和
<ion-menu [content]="content" side="right" id="menu2">...</ion-menu>
感谢 @johnnyfittizio 的评论!我已经进行了您在那里提到的更改(如果我忘记了什么,请编辑此答案).
Thanks @johnnyfittizio for your comments! I've made the changes you mentioned there (please edit this answer if I forgot something).
所以基本上我们只需要像这样添加两个菜单(例如,在 app.html
页面中):
So basically we just need to add both menus (for instance, in the app.html
page) like this:
<ion-menu [content]="content" side="left" id="menu1">
<ion-content>
<ion-list>
<button ion-item menuClose="menu1" detail-none>
Close Menu 1
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" side="right" id="menu2">
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
然后我们需要在标题中添加两个菜单按钮,如下所示:
Then we need to add both menu buttons in the header like this:
<ion-header>
<ion-navbar primary>
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
HomePage
</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Home page</p>
</ion-content>
请注意,每个按钮都有 menuToggle="left"
或 menuToggle="right"
属性,以便能够切换正确的菜单.
Please notice that each button has the menuToggle="left"
or menuToggle="right"
property to be able to toggle the proper menu.
这篇关于Ionic 2 - 同时有多个菜单(右 - 左)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!