Popper 弹出提示
使用弹出提示组件,您可在另一个元素之上显示一些内容。 这可以替代 react-popper。
以下是弹出提示
组件的一些重要功能:
- 🕷 Popper 依赖第三方库 (Popper.js) 来实现完美的定位。
- 💄 这是 react-popper 的一个替代性 API。 它是为了简单性而设计。
- 📦 10 kB 压缩包 (7 kB 来自 Popper.js).
- 为了避免渲染问题,子组件作为页面 body 的
Portal
。 您可以使用disablePortal
来禁用此行为。 - 不同于
Popper
组件,你可以自由实现滚动(scroll)行为。 弹出提示的位置会随着视口中的可用面积而更新。 - Clicking away 不会隐藏
弹出提示
组件。 若您需要这个功能,请使用ClickAwayListener
- 可以参照 menu 文档章节 中的一个样例。 - 创建一个新
Popper.js
实例时,anchorEl
作为一个参考对象在其中传递。
简单的弹出提示
<button aria-describedby={id} type="button" onClick={handleClick}>
Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<div className={classes.paper}>The content of the Popper.</div>
</Popper>
过渡动画
通过渲染附属的子元素和一个过渡组件,您可以给弹出提示组件的打开/关闭状态加上动画效果。 此组件应遵守以下条件:
- 作为弹出提示的直接子元素。
- 当进入过渡时调用
onEnter
回调属性。 - 当退出过渡完成后应该调用
onExited
回调属性。 这两个回调属性保证了弹出提示组件在关闭并展示完过渡动画时,将会移除子内容。
弹出提示组件已经内嵌支持 react-transition-group。
<button aria-describedby={id} type="button" onClick={handleClick}>
Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)}
</Popper>
或者,你可以使用 react-spring。
<button aria-describedby={id} type="button" onClick={handleClick}>
Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)}
</Popper>
Scroll around this container to experiment with flip and preventOverflow modifiers.
Appearance
Modifiers (options from Popper.js)
<Popper
placement="bottom"
disablePortal={false}
modifiers={{
flip: {
enabled: true,
},
preventOverflow: {
enabled: true,
boundariesElement: 'scrollParent',
},
arrow: {
enabled: false,
element: arrowRef,
},
}}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.