如何从另一侧添加第二个侧面菜单 [英] How to add second sidemenu from other side

问题描述

如何添加第二个 sidemenu ？我在左侧有正常的 sidemenu ，效果很好。现在我想用过滤器选项添加第二个 sidemenu 。

How can I add a second sidemenu? I have the normal sidemenu on the left side which works great. Now I want to add a second sidemenu with filter options.

推荐答案

就像你可以在来自Ionic2文档的MenuToggle 中阅读一样，你可以这样做首先在 app.html 中创建两个离子菜单（或者你想要定义第二个菜单的地方）

Just like you can read in MenuToggle from Ionic2 docs you can do it by first creating two ion-menu in your app.html (or where you want to define the second menu)

<ion-menu [content]="content" side="left" id="menu1">

  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>

  <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-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

请注意 side =left和 side =right ion-menu 元素。我们稍后会使用它来知道应该打开哪个菜单（ id 属性也可以以相同的方式使用）。

Please notice the side="left" and side="right" attributes in the ion-menu element. We'll use that later to know which menu should be opened (the id attribute could be also used in the same way).

然后，在你的页面中，添加到每个 menuToggle 应该打开哪个菜单，分配一边我们之前定义的属性（或 id ，如果您愿意这样做）。

Then, in your page, add to each menuToggle which menu should be opened by assigning to it the side attribute we defined earlier (or the id if you prefer to do so).

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

你可以找到在这里工作plnuker 。

更新：

为了进行测试，我只是将main从app.html移到
页面的html文件map.html。我没有改变侧面或ids。但单击按钮时没有显示
菜单（也未更改
）

For testing I simply moved the main from the app.html to a page's html file map.html. I didn't change the sides or ids. But the menu is not appearing when clicking the button (also have been not changed)

我'已经在这个plunker 中完成了这项工作。现在， HomePage 在该hmtl文件中定义了右边的菜单。

I've done that in this plunker. Now, the HomePage has the menu on the right defined there in that hmtl file.

<ion-menu [content]="content" side="right" id="menu2">
  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #content padding>

</ion-content>

请注意内容变量< ion-content> 元素。您可以在 Ionic docs 中阅读：

Please notice the content variable in the <ion-content> element. Like you can read in Ionic docs:

要向应用程序添加菜单，该元素应该是
作为其所属内容的兄弟添加。应将一个局部变量
添加到content元素并传递给content属性中的菜单元素
。这告诉菜单它附加了
的内容，因此它知道要观看哪个元素的手势。

To add a menu to an application, the element should be added as a sibling to the content it belongs to. A local variable should be added to the content element and passed to the menu element in the content property. This tells the menu which content it is attached to, so it knows which element to watch for gestures.

这篇关于如何从另一侧添加第二个侧面菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！