Estrategias de desplazamiento

    La estrategia del desplazamiento determina cómo se gestiona el desplazamiento en el sistema proporcionadoIgxOverlayService. Hay cuatro estrategias de pergamino:

    1. NoOperation: no hace nada.
    2. Bloquear: el evento se cancela y el componente no se desplaza con la ventana.
    3. Cerrar: utiliza una tolerancia y cierra un componente expandido al desplazarse si se excede la tolerancia.
    4. Absoluto: desplaza todo.

    Usage

    Cada estrategia de desplazamiento tiene los siguientes métodos:

    • initialize- inicializa la estrategia de desplazamiento. Necesita una referencia del documento, el servicio de superposición y el id del componente que se ha generado
    • attach- adjunta la estrategia de desplazamiento al elemento especificado o al documento
    • detach- Desprende la estrategia del pergamino
    this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();

    Getting Started

    La estrategia de desplazamiento se transmite como una propiedad en eloverlaySettings parámetro cuando se llama aloverlay.attach() método:

    // Initializing and using overlay settings
const overlaySettings: OverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new AbsoluteScrollStrategy(), //Passes the scroll strategy
    modal: true,
    closeOnOutsideClick: true
}
const overlayId = overlay.attach(dummyElement, overlaySettings);

    Para cambiar la estrategia de desplazamiento usada por la superposición, sobrscribe lascrollStrategy propiedad deloverlaySettings objeto que se pasa a la superposición. Si ya se ha adjuntado una estrategia, deberías separar el ID generado previamente:

    // overlaySettings is an existing object of type OverlaySettings
// to override the scroll strategy
const newOverlaySettings = Object.assing({}, overlaySettings);
Object.assing(newOverlaySettings, {
    scrollStrategy: new CloseScrollStrategy()
})
const overlayId = overlay.attach(dummyElement, newOverlaySettings);
overlay.show(overlayId);

    Dependencies

    Para utilizar cualquiera de las estrategias de desplazamiento, impórtelo así:

    import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";

    Estrategias de desplazamiento

    Las estrategias de desplazamiento pueden pasarse aloverlaySettings objeto para determinar cómo debe manejar el desplazamiento superpuesto. La demo a continuación ilustra la diferencia entre los separadosscrollStrategies:

    EloverlaySettings objeto también permite pasar una propiedad booleana (modal). Esto controla cómo se mostrará la superposición:

    • Si lamodal propiedad lo estáfalse, el elemento estará unido al primer plano del DOM, pero todo seguirá activo e interactivo, por ejemplo, desplazarse, hacer clic, etc.
    • Si lamodal propiedad lo estrue, el elemento se adjuntará al primer plano del DOM y un bloqueador superpuesto se envolverá detrás de él, deteniendo la propagación de todos los eventos:

    API References

    Additional Resources