Popper
A Popper can be used to display some content on top of another. It's an alternative to react-popper.
Some important features of the Popper
component:
- 🕷 Popper relies on the 3rd party library (Popper.js) for perfect positioning.
- 💄 It's an alternative API to react-popper. It aims for simplicity.
- 📦 8 kB comprimido.
- The children is
Portal
to the body of the document to avoid rendering problems. You can disable this behavior withdisablePortal
. - The scroll isn't blocked like with the
Popover
component. The placement of the popper updates with the available area in the viewport. - Clicking away does not hide the
Popper
component. If you need this behavior, you can useClickAwayListener
- see the example in the menu documentation section. - The
anchorEl
is passed as the reference object to create a newPopper.js
instance.
La función de estilo de la paleta.
Simple Popper
<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>
Transiciones
The open/close state of the popper can be animated with a render prop child and a transition component. Este componente debe respetar las siguientes condiciones:
- Be a direct child descendent of the popper.
- Call the
onEnter
callback prop when the enter transition starts. - Call the
onExited
callback prop when the exit transition is completed. Call theonExited
callback prop when the exit transition is completed.
Popper has built-in support for 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>
Como alternativa, puedes usar 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.
Prevent Overflow
Flip
Arrow
<Popper
placement="bottom"
disablePortal={false}
modifiers={[
{
name: 'flip',
enabled: true,
options: {
altBoundary: true,
rootBoundary: 'document',
padding: 8
}
},
{
name: 'preventOverflow',
enabled: true,
options: {
altAxis: true,
altBoundary: true,
tether: true,
rootBoundary: document,
padding: 8
}
},
{
name: 'arrow',
enabled: false,
options: {
element: arrowRef,
}
},
]}
>
Virtual element
The anchorEl
property can be a reference to a fake DOM element. You need to create an object shaped like the VirtualElement
.
Highlight part of the text to see the popper:
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.
Proyectos relacionados
Para usos más avanzados tal vez puedas aprovercharte de:
Ayudante PopupState
There is a 3rd party package material-ui-popup-state
that takes care of popper state for you in most cases.