如何添加第二个sidemenu
?我在左侧有正常的sidemenu
,效果很好。现在我想添加第二个sidemenu
与过滤器选项。如何从另一侧添加第二个sidemenu
1
A
回答
1
就像你可以在MenuToggle from Ionic2 docs阅读,你可以通过在最初创建两个ion-menu
做你app.html
(或您要定义的第二个菜单)
<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"
和ion-menu
元素中的side="right"
属性。稍后我们将使用它来知道应该打开哪个菜单(id
属性也可以以相同的方式使用)。
然后,在你的页面,添加到菜单应(如果你愿意这样做或id
)分配给它,我们前面定义的side
属性打开每个menuToggle
。
<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>
你可以找到一个working plnuker here。
UPDATE:
为了测试我干脆搬到从app.html主要为 页面的HTML文件map.html。我没有改变双方或ids。但点击按钮时 菜单没有出现(也已经没有 改变)
我已经做了,在this plunker。现在,HomePage
在那个hmtl文件中定义了右边的菜单。
<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>
元素content
变量。就像你可以在阅读Ionic docs:
要将菜单添加到应用程序,该元素应该是 添加为兄弟,以它所属的内容。应将内部变量 添加到内容元素中,并将其传递到内容属性中的菜单元素 。这告诉菜单连接到哪个内容 ,所以它知道要观看哪个元素的手势。
相关问题
- 1. 如何添加第二个UIPageViewController
- 2. iPhone Sdk:如何添加第二个UINavigationController?
- 3. 如何添加javafx TabPane中第一个Tab的左侧空间?
- 4. CSS定位问题。无法添加第二个侧边栏
- 5. 计数从第二个表连接到ID的所有行,并在第一个表的右侧添加值
- 6. 添加第二个Y轴
- 7. 如何从UINavigationController中以编程方式添加第二个UITableView
- 8. ANT:如何从一个路径“添加”路径元素到第二个路径?
- 9. 加入后从另一个表第二最低值
- 10. MVC两个列表框的双击从第一个到第二个添加
- 11. 如何将第二个对象的值添加到第一个对象?
- 12. 添加与第一个y轴相关的第二个y轴
- 13. 从一个jlist添加到另一个
- 14. 如何加载第一个selectOneMenu的第二个selectOneMenu?
- 15. 如何将ID从一个表添加到另一个表?
- 16. 从第二个ViewController到第一个ViewController
- 17. 加入两个表从第一日期在从第二
- 18. 如何从第一个表中排序数据第二个表#
- 19. 我如何让一个节点从屏幕的一侧移动到另一侧?
- 20. 网站从一侧跳到另一侧?
- 21. 如何让第二个VPS作为另一个VPS的后备?
- 22. 如何给li添加一个类,它可能是jquery输入的第一,第二或第三个父项?
- 23. 如何在侧栏添加一行?
- 24. 如何添加另一个HTML标签
- 25. UIView与CGPath和另一个包含第一个UIView。如何适合第一个观点在第二个?
- 26. 添加第二个UNION导致错误
- 27. 在BokehJS中添加第二个y轴
- 28. 为语句添加第二个函数
- 29. libgdx:scene2d为hud添加第二个阶段?
- 30. 向此jquery添加第二个函数?
如果我把放在我的app.html中,一切都很好。但我想在我的页面中定义菜单。这也有可能吗?我有几个页面需要不同的右键菜单。 –
rakete
是的,这也是可能的,“离子菜单”可能在要显示它的页面中。 – sebaferreras
为了测试,我只是将主要的从app.html移动到页面的html文件map.html。我没有改变双方或ids。但是点击按钮时菜单没有出现(也没有改变)。 –
rakete