Ionic 5 弹出框位置
Ionic 5 Popover Position
我正在使用 ion-popover。
在文档的示例中,当您单击右上角的三个点时,弹出窗口会显示在单击的按钮旁边。
重现此内容的好方法是什么?有内置的方法吗?
由于找不到方法,我尝试手动设置弹出窗口的样式,但这也不起作用。
我的page.ts
const popover = await this.popoverController.create({
component: OptionsComponent,
cssClass: 'my-custom-class',
event: ev
});
return await popover.present();
我的global.scss
.my-custom-class .popover-content {
position: absolute;
right: 0;
top: 0;
}
我是不是做错了什么?有没有更好的方法来解决这个问题?
已解释in the docs(强调我的):
To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method.
HTML
<div (click)="showPopover($event)">
<div>AAA</div>
</div>
在您的 class 中,将事件作为参数传递给您的方法:
showPopover(event) {
const popover = await this.popoverController.create({
event,
component: OptionsComponent,
cssClass: 'my-custom-class', // optional
});
return await popover.present();
}
不需要额外的 CSS 除非你想设置模式内容的样式。
我正在使用 ion-popover。
在文档的示例中,当您单击右上角的三个点时,弹出窗口会显示在单击的按钮旁边。
重现此内容的好方法是什么?有内置的方法吗?
由于找不到方法,我尝试手动设置弹出窗口的样式,但这也不起作用。
我的page.ts
const popover = await this.popoverController.create({
component: OptionsComponent,
cssClass: 'my-custom-class',
event: ev
});
return await popover.present();
我的global.scss
.my-custom-class .popover-content {
position: absolute;
right: 0;
top: 0;
}
我是不是做错了什么?有没有更好的方法来解决这个问题?
已解释in the docs(强调我的):
To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method.
HTML
<div (click)="showPopover($event)">
<div>AAA</div>
</div>
在您的 class 中,将事件作为参数传递给您的方法:
showPopover(event) {
const popover = await this.popoverController.create({
event,
component: OptionsComponent,
cssClass: 'my-custom-class', // optional
});
return await popover.present();
}
不需要额外的 CSS 除非你想设置模式内容的样式。