Question

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

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

Answer 1

查看代码，似乎没有弹出窗口位置的选项。但是，当用户点击某些东西打开弹出窗口时，可以通过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中全局声明它，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您希望弹出按钮位于te按钮旁边，请将事件传递给函数create（），如下所示

// home.html

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

// home.ts

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

Answer 4

通过在app.scss（Globle CSS）中添加样式，我找到了一个更简单的解决方案

.popover-content{
  top: 60px !important;
}

Answer 5

如果您只想更改弹出框相对于所按下元素的位置，那么 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来覆盖离子样式（或使用更具体的CSS选择器）。 / p>

Answer 6

对我来说，问题是通过使用CSS设置位置来解决的。首先，您必须设置元素的cssClass：

组件/页面代码：

async showPopover (ev) { 
 component: myComponent,
 event: ev,
 cssClass: 'myPopoverStyle'
}

然后，您必须设置全局CSS（通常为app.scss）。

app.scss

.myPopoverStyle .popover-content{
    top: 60px !important;
}

Answer 7

因此，我在最近的项目中发现了类似的东西，我想将离子弹药放置在底部而不是默认位置。类似于Android的底表。

研究了几个答案并自己做了一些调整之后，我找到了一种解决方法。

第1步：：为弹出窗口分配课程：

this.popover = await this.popoverController.create({
      component: AddToCartComponentComponent,
      event: ev,
      translucent: true,
      animated: false,
      cssClass: 'bottom-sheet-popover'
    });

步骤2：添加CSS

在创建期间将自定义类分配给弹出式元素后，转到全局CSS并实施以下调整：

.bottom-sheet-popover .popover-content {
    width: 100% !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: calc(100% - 200px) !important;
    max-height: 200px;
    min-height: 200px; 
  }

就是这样。完成了。

注意：这适用于Ionic 4。

如何在Ionic中定位一个popover 2

7 个答案: