popper.js - 反应波普尔。如何移动元素相对父级?
问题描述
我正在尝试移动父组件内部的 Popper。我该怎么做?
我尝试在修饰符对象中使用偏移属性。例如:
offset: {
offset: 20,
}
但是 offset 只会将 Popper 朝一个方向移动。如果展示位置={'top' || 'bottom'} => 如果placement={'right' || 它会左右移动 'left'} => 它上下移动。
const Layer = ({
children,
align,
inner = true,
parent,
portal,
}) => (
<Manager>
<Popper
placement={align}
modifiers={{
inner: {
enabled: inner,
},
}}
referenceElement={parent}
>
{({ ref, style, placement }) => (
<div
ref={ref}
data-placement={placement}
style={style}
>
{console.log(style)}
{children}
</div>
)}
</Popper>
</Manager>
)
解决方案
刚刚解决了这个问题:将 MaterialUI Tooltip 放置在锚元素的“顶部”?(反应)
PopperProps={{
popperOptions: {
modifiers: {
flip: { enabled: false },
offset: {
enabled: true,
offset: '20px 20px'
}
}
}
}}
推荐阅读
- azure - 无法找到编辑 Microsoft Azure Web Bot 样式的方法
- c# - 实时跟踪系统用户界面中的图形绘制延迟(使用 c# winform 应用程序)
- javascript - 为什么包含函数不使用二进制搜索
- visual-studio - Visual Studio 2017 中的 Xamarin - 安装 NDK 和 HAXM
- java - 如何使用 netbeans 中的 jframe 形式在 Java 中进行简单的测验?
- algorithm - 硬币找零递归算法展开
- angular - 具有 (CSP) 内容安全策略的 Angular 5 和 ASP.Net Core
- java - TOMCAT 中的 JAVA SOAP 服务依赖关系
- r - R:XTS 对象的奇怪行为
- c# - 如何创建清单文件?