Cómo usar popperOffsets para ajustar manualmente las coordenadas en Popper.js
¿Qué es popperOffsets en Popper.js?
popperOffsets es un modifier de Popper.js que proporciona las coordenadas calculadas del popper en relación con su referencia. Aunque por defecto estas coordenadas se calculan automáticamente, este modifier te permite manipularlas directamente para ajustar la posición del popper según necesidades específicas, como alineación personalizada o desplazamientos no estándar.
Ejemplo básico de uso de popperOffsets
Para ajustar manualmente las coordenadas del popper, puedes crear un modifier personalizado que modifique los valores predeterminados de popperOffsets. A continuación, se muestra un ejemplo:
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [
{
name: 'popperOffsets',
enabled: true,
phase: 'main', // Se ejecuta en la fase principal
fn({ state }) {
// Ajuste manual de las coordenadas
state.modifiersData.popperOffsets.x += 10; // Desplaza 10px en el eje X
state.modifiersData.popperOffsets.y += 20; // Desplaza 20px en el eje Y
}
}
]
});En este ejemplo:
-
El
popperse desplaza 10px hacia la derecha y 20px hacia abajo, partiendo de las coordenadas calculadas automáticamente por Popper.js.
Modificadores y fases en popperOffsets
Popper.js organiza el ciclo de vida de los poppers en varias fases, y el modifier de popperOffsets generalmente se ejecuta en la fase main, donde se realizan ajustes clave de posicionamiento.
-
Fase
main: Es la fase más utilizada para aplicar ajustes a la posición del popper. Aquí es donde puedes realizar cambios manuales después de que las posiciones automáticas hayan sido calculadas.
Ejemplo avanzado: desplazamiento dinámico según el tamaño del viewport
Puedes usar popperOffsets junto con otros modifiers como flip para ajustar la posición dinámica del popper según el espacio disponible en la ventana del navegador:
const popperInstance = Popper.createPopper(referenceElement, popperElement, {
modifiers: [
{
name: 'popperOffsets',
enabled: true,
phase: 'main',
fn({ state }) {
const viewportWidth = window.innerWidth;
// Si el viewport es pequeño, desplaza más el popper
if (viewportWidth < 600) {
state.modifiersData.popperOffsets.x += 15;
state.modifiersData.popperOffsets.y += 30;
}
}
},
{ name: 'flip', enabled: true } // Ajusta el popper si no hay espacio
]
});
Ventajas de usar popperOffsets
- Control preciso: Te permite ajustar manualmente la posición del popper en relación con su referencia, ideal para diseños complejos.
- Flexibilidad: Puedes combinarlo con otros modifiers para lograr comportamientos más avanzados y personalizados.
- Integración fácil: Funciona perfectamente dentro de la arquitectura de modifiers de Popper.js, manteniendo la coherencia en el manejo de posiciones.
Referencia oficial
Para más detalles sobre cómo usar popperOffsets, consulta la documentación oficial de Popper.js.
Jorge García
Fullstack developer