ionic 4 添加侧边菜单
我开始了一个带有选项卡模板的项目,然后我决定添加一个侧边菜单.问题是侧边菜单根本没有出现.这是我的 app.components.html 看起来像
i started a project with tab template which i then later decided to add a side menu. the trouble is the side menu does not appear at all. here is my app.components.html looks like
<ion-app>
<ion-split-pane>
<ion-menu side="start">
<ion-header translucent>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>
实际上,在我的实际页面上方执行后,会出现一秒钟并因此显示白页.
actually after doing above my actual page comes for a brief second and shows a white page due to this.
在控制台中我看到一个错误
in the console i see an error
sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.
但我已经有了内容元素.
but i already have content element.
Sirius2013 是正确的,您将需要使用 contentId 属性.请参阅下面的工作示例:
Sirius2013 is correct, you will need to use the contentId attribute.
See a working example below:
App.component.html
<ion-app>
<ion-menu contentId="content1" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
menu stuff
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
AnyPage.html
在您想要显示侧边菜单的页面中,您可以使用 ion-menu-button 标签.
看这个例子:
In the page you want to show your side menu, you can use the ion-menu-button tag.
See this example:
<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
将 autoHide 标记设置为 false,这样您将始终看到菜单按钮.
Set the autoHide tag to false, so you will always see the menu button.