Ionic4 侧边栏

搭建带侧边栏的框架

win+R输入cmd,选择自己创建项目的位置
然后输入：

Ionic start ionicmenudemo sidemenu

ionicmenudemo是项目名称
sidemenu是侧边栏

自己设置侧边栏

也可以在之前搭建的框架里面，在前台写代码：

<ion-menu side="start" menuId="first">
<ion-header>
    <ion-toolbar color="success">
<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-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>

上边的是左侧侧边栏，还有右侧侧边栏：
把属性改成end,就是右侧侧边栏了。

还可以通过改变一下属性值，来改变侧边栏的效果。

导航键：
在首页的前台页面下如下代码：

<ion-buttons slot="end">
     <ion-menu-button menu="end"></ion-menu-button>
</ion-buttons>

用js控制侧边栏

1.给ion-menu定义menuld属性

<ion-menu side="start" menuld="first></ion-menu>

2.控制菜单的页面中引入下面代码：

import { MenuController } from '@ionic/angular';

3.初始化构造函数：

constructor(private menu: MenuController) {}

4.对应方法中通过js通过侧边栏

doOPenMenu(){
     this.menu.open('first');
}