-
如何建立侧边栏?
1、建立项目的时候,直接建立有侧边栏的项目
ionic start demo sidemenu
ps:
blank:一个空白的启动项目 sidemenu:一个带有侧面菜单的起始项目,在内容区域中有导航 tabs:具有简单选项卡界面的启动项目
2、自己加右侧侧边栏
1)首先打开:app.component.html(出现如下的代码)
2)将下面的代码放入上图中(加入新的侧边栏)<ion-menu side="end" type="push" menuId="end"> <ion-header> <ion-toolbar color="danger"> <ion-title>右侧</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> </ion-list> </ion-content> </ion-menu>
-
如何给侧边栏加按钮?
根据上面的步骤实现增添右侧菜单栏,找到home->home.page.html
<ion-buttons slot="end"> <ion-menu-button menu="end"> </ion-menu-button> </ion-buttons>
-
如何利用按钮控制侧边栏?
(利用js控制侧边栏)
1、给ion-menu定义menuId属性
2、控制菜单的页面找那个引入下面代码import { MenuController } from '@ionic/angular';
3、初始化构造函数
constructor(private menu: MenuController ) { }
4、对应方法中通过js控制侧边栏
openSlideMenu() { this.menu.open('end'); }
结果展示: