如何在Ionic中定位一个popover 2

Question

如何在Ionic 2中手动定位弹出窗口？

我无法在css类中设置位置，因为弹出控制器使用内联样式设置位置。

Answer 1

通过代码查看，popover的位置似乎没有选项。但是，当用户点击某些东西打开弹出窗口时，可以通过click事件定位它。我们也可以将这些知识用于手动定位：

let pop = this.popoverCtrl.create(MyPopover);

let ev = {
  target : {
    getBoundingClientRect : () => {
      return {
        top: 100
      };
    }
  }
};

pop.present({ev});

有几点需要注意：

• 您可以设置top，left或两者的值。
• 值必须以像素为单位给出。
• 如果没有给出top或left，那么通常的定位算法用于该值。

我很高兴知道是否有更好的方法，但到目前为止，这是我能想到的最好的方法。

这肯定适用于Ionic2和3，很高兴有人确认它是否也适用于Ionic4！

Answer 2

虽然上面的代码适用于某些人，但我找到了一个更好的解决方案，在popover上传递cssClass。

要使用cssClass，必须在app.scss中全局声明它，如下所示：

.custom-popover .popover-content {
  width: 80%;
  top: 70px;
  left: 30px;
  bottom: 70px
}

在.ts文件中，您可以传递如下所示的类：

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'custom-popover'});

popover.present();

Answer 3

如果你想要按钮旁边的弹出窗口，请传递给函数create（）事件，就像这样

//home.HTML

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

//home.同时

 presentRadioPopover(event) {
    const popover = this.popoverCtrl.create(HomepopoverPage);
    popover.present({
      ev: event
    });
  }

Answer 4

如果您只想更改弹出窗口相对于按下的元素的位置，CSS转换可能会有所帮助。例如。将其放置在单击元素的右上角/左下角，而不是默认的右下角。

添加cssClass选项：

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'popover-top-right'});

popover.present({
  ev: event
});

并在某处使用以下CSS：

.popover-top-right .popover-content {
  transform: translateY(-120%) !important;
}

这个解决方案有点像Mnemo建议的，但更通用，因为您不需要指定固定坐标。虽然它不是可定制的，因为Schlaus接受的解决方法。

这样你就可以使用translateXY(-100%, -100%)将popover放到左上角等等。可能需要使用!important来覆盖离子样式（或者使用更具体的CSS选择器）。