如何在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给出,则通常的定位算法用于该值.

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

Answer 2

尽管上面的代码对某些人有用，但是我发现了在弹出窗口上传递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

如果您只想更改弹出框相对于按下元素的位置，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%)将弹出框放置在左上角等。!important可能需要覆盖 ionic 样式（或使用更具体的 CSS 选择器）。