Cómo usar Modifiers para personalizar el comportamiento en Popper.js
¿Qué son los Modifiers en Popper.js?
En Popper.js, los modifiers son objetos que modifican el comportamiento predeterminado del popper. Estos ajustes incluyen cambios en la posición, tamaño y visualización de los elementos popper respecto a su referencia (por ejemplo, un botón). Popper.js viene con una serie de modifiers predefinidos, como offset, preventOverflow y flip, pero también puedes crear los tuyos para necesidades específicas.
Ejemplos de modifiers más comunes
1. Offset: Ajusta la posición del popper en relación con su referencia.
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [{ name: 'offset', options: { offset: [0, 8] } }]
});2. Prevent Overflow: Evita que el popper se salga de los límites del viewport o contenedores.
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [{ name: 'preventOverflow', options: { boundary: 'viewport' } }]
});3. Flip: Cambia la dirección del popper si no hay espacio suficiente en su posición original.
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [{ name: 'flip', options: { fallbackPlacements: ['bottom', 'top'] } }]
});Cómo crear un modifier personalizado
Para crear un modifier personalizado en Popper.js, debes definir un objeto con un nombre único y una función que se ejecuta en cada ciclo de renderizado del popper.
const myModifier = {
name: 'myModifier',
enabled: true,
phase: 'main',
fn({ state }) {
// Lógica personalizada aquí
console.log('Custom modifier is running');
}
};
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [myModifier]
});Referencia oficial
Puedes obtener más detalles sobre los modifiers en la documentación oficial de Popper.js.
Jorge García
Fullstack developer