import { Platform, MenuController } from 'ionic-angular';
// ... Other code
constructor(menuCtrl: MenuController /* ... other code ...*/)
// ... Other code
let menu = menuCtrl.get();
menu.swipeEnable(false); // Disable drag to open/close
// Override default behaviour of closing the menu on
// content or backdrop click
menu['onBackdropClick'] = () => {
// No-op
};
menu.ionOpen.subscribe(() => {
// When the menu is open ...
// Remove Ionic's CSS rules for menu-content-open class that restricts
// mouse events on ion-nav
menu.getContentElement().classList.remove("menu-content-open");
// Reduce the size of the content pane so that it does not
// overflow off the screen
menu.getContentElement().style.width =
`calc(100% - ${menu.getMenuElement().clientWidth}px)`;
});
menu.ionClose.subscribe(() => {
// When the menu is closed ...
// Restore the size of the content pane
menu.getContentElement().style.width = '';
});
1 回答
以下是如何在离子应用程序中执行此操作的示例代码 .
我做了一个stackblitz项目你可以检查一下 . 你可以从here.查看