用下拉菜单转换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();
}
}