Ionic4.x 中的 UI 組件(UI Components) 側邊欄ion-menu組件以及底部tabs結合 側邊欄 ion-menu

1、側邊欄 ion-menu 組件的基本使用

 

1、創建項目

 

ionic start myApp sidemenu

 

2、配置項目

 

屬性	作用	可選值
side	配置側邊欄的位置	start end
menuId	側邊欄的唯一標識
type	配置側邊欄的彈出方式	overlay, reveal, push
swipe-gesture	滑動彈出側邊欄	true false

 

 

<ion-menu side="start" menuId="first"> <ion-header>
<ion-toolbar color="primary"> <ion-title>Start Menu</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 這是一個列表</ion-item> </ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 這是一個列表</ion-item> </ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

 

---

 

 

<ion-app>


  <ion-menu side="start" menuId="first" type="overlay">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>

        <ion-menu-toggle>

          <ion-item>Menu Item1111</ion-item>

        </ion-menu-toggle>

        <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>


  <ion-menu side="end" menuId="end1" type="push">
    <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-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet main></ion-router-outlet>

</ion-app>

---

 

 

2、側邊欄 ion-menu 中的事件和方法

 

Ionic4.x 中允許我們用 js 控制側邊欄，具體步驟如下。

 

1、給 ion-menu 定義 menuId 屬性

 

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

 

2、控制菜單的頁面中引入下面代碼:

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

3、初始化構造函數

constructor(private menu: MenuController) { }

4、對應方法中通過 js 控制側邊欄

 

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

 

---

3、底部 tabs 結合側邊欄 ion-menu

 

找到 app.component.html 在頁面中加入下面代碼

 

<ion-app>
<ion-menu swipe-gesture=true type="overlay" menuId="first" > <ion-header>
<ion-toolbar> <ion-title>菜單</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 這是一個列表 </ion-item></ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>