Skip to content
+

Popper

Un Popper se puede utilizar para mostrar algún contenido encima de otro. Es una alternativa a react-popper.

Algunas características importantes del componente Popper:

  • 🕷 Popper se basa en la biblioteca de terceros (Popper.js) para un posicionamiento perfecto.
  • 💄 Es una API alternativa a react-popper. Su objetivo es la simplicidad.
  • Su elemento hijo es un Portal en el cuerpo del documento para evitar problemas de renderizado. Puede desactivar este comportamiento con disablePortal.
  • El desplazamiento no se bloquea como con el componente Popover. La colocación del popper se actualiza con el área disponible en la ventana gráfica.
  • Al hacer clic fuera no se oculta el componente Popper. Si necesita este comportamiento, puede usar el Click-Away Listener - vea el ejemplo en la sección de documentación del menú (Menu).
  • El anchorEl se pasa como objeto de referencia para crear una nueva instancia de Popper.js.

Popper básico

Press Enter to start editing

Transiciones

El estado de apertura/cierre del popper puede ser animado con un render prop child y un componente de transición. Este componente debe respetar las siguientes condiciones

  • Ser hijo directo descendiente del popper.
  • Llamar al callback prop onEnter cuando se inicia la transición de entrada.
  • Llamar a la prop callback onExited cuando se complete la transición de salida. Estos dos callbacks permiten al popper desmontar el contenido hijo cuando se cierra y se completa la transición.

Popper tiene soporte integrado para react-transition-group.

Press Enter to start editing

Popper posicionado



Zona de juegos de desplazamiento

Desplácese por este contenedor para experimentar con los modificadores flip y preventOverflow.

<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,
      },
    },
  ]}
>

Elemento virtual

El valor de la prop anchorEl puede ser una referencia a un elemento DOM falso. Necesitas crear un objeto con forma de VirtualElement (Inglés).

Resalta parte del texto para ver el 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.

Sin Estilos

Si quiere controlar completamente el diseño del componente, sin estilos de interfaz de usuario que modificar, use la versión U-Base. Esta versión sin estilos del componente es la opción ideal para una gran personalización con un tamaño de paquete más pequeño.

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.