使用下拉菜單轉換Ionic側菜單

Question

我正在從事離子項目，但我嘗試將側面菜單轉換為下拉菜單。

我使用ionic start appname sidemenu命令創建了ionic應用程序。

當前，默認行為是當我單擊漢堡包鏈接以打開菜單時，菜單從左向右滑動。

但是我想要這樣的東西

這個

我怎樣才能做到這一點？

Answer 1

鑒於您使用的是ionic 3+則可以利用PopoverController

所以現在你有

<button ion-button icon-only (click)="presentPopover($event)">
  <ion-icon name="menu"></ion-icon>
</button>

然后在您要呈現它的主頁上

import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present({
      ev: myEvent
    });
  }
}

然后您的菜單將是

@Component({
  template: `
    <ion-list>
      <ion-list-header>Ionic</ion-list-header>
      <button ion-item (click)="close()">Home</button>
      <button ion-item (click)="close()">Services</button>
      <button ion-item (click)="close()">Contact</button>
    </ion-list>
  `
})
class PopoverPage {
  constructor(public viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }
}