如何在 Ionic 2 中定位弹出框

How to position a popover in Ionic 2(如何在 Ionic 2 中定位弹出框)
本文介绍了如何在 Ionic 2 中定位弹出框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

如何在 Ionic 2 中手动定位弹出框?

How do I manually position a popover in Ionic 2?

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

I can't set the position in a css class, since the popover controller sets the position with an inline style.

推荐答案

查看代码,弹出框的位置似乎没有选项.但是,当由于用户点击某物而打开弹出框时,它可以通过点击事件定位.我们也可以将这些知识用于手动定位:

Looking through the code, there doesn't seem to be an option for the popover's position. However, when opening the popover as a result of the user tapping something, it can be positioned by the click event. We can use that knowledge for manual positioning as well:

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

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

pop.present({ev});

需要注意的几点:

  • 您可以设置 topleft 或两者的值.
  • 值必须以像素为单位,如数字.
  • 如果 topleft 没有给出,那么通常的定位算法将用于该值.
  • You can set the value for top, left, or both.
  • The values must be given in pixels, as numbers.
  • If top or left is not given, then the usual positioning algorithm is used for that value.

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

I'd be happy to know if there's a better way, but so far this is the best I could come up with.

这当然适用于 Ionic2 和 3,很高兴有人确认它是否也适用于 Ionic4!

This certainly works in Ionic2 and 3, happy to have someone confirm if it works in Ionic4 as well!

这篇关于如何在 Ionic 2 中定位弹出框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)
Ordinals in words javascript(javascript中的序数)
getFullYear returns year before on first day of year(getFullYear 在一年的第一天返回前一年)