Question

我正在从事离子项目，但我正尝试将侧面菜单转换为下拉菜单。

我使用ionic start appname sidemenu命令创建了离子应用。

当前，默认行为是当我单击汉堡包链接以打开菜单，然后菜单从左向右滑动。

但是我想要类似的东西

this one

我该怎么做？

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();
  }
}

使用下拉菜单转换Ionic侧菜单

1 个答案: