Estrategias de desplazamiento

    La estrategia de desplazamiento determina cómo se maneja el desplazamiento en el IgxOverlayService proporcionado. Hay cuatro estrategias de desplazamiento:

    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.

    Uso

    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 la identificación del componente representado.
    • attach: adjunta la estrategia de desplazamiento al elemento especificado o al documento
    • detach: separa la estrategia de desplazamiento
    this.scrollStrategy.initialize(document, overlayService, id);
    this.scrollStrategy.attach();
    this.scrollStrategy.detach();
    typescript

    Empezando

    La estrategia de desplazamiento se pasa como una propiedad en el parámetro overlaySettings cuando se llama al método overlay.attach():

    // 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); 
    typescript

    Para cambiar la estrategia de desplazamiento utilizada por la superposición, anule la propiedad scrollStrategy del objeto overlaySettings pasado a la superposición. Si ya se adjuntó una estrategia, debe separar el ID generado anteriormente:

    // 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);
    typescript

    dependencias

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

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

    Estrategias de desplazamiento

    Las estrategias de desplazamiento se pueden pasar al objeto overlaySettings para determinar cómo la superposición debe manejar el desplazamiento. La siguiente demostración ilustra la diferencia entre las scrollStrategies independientes:

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

    • Si la propiedad modal es false, el elemento se adjuntará al primer plano del DOM pero todo seguirá activo e interactuable (por ejemplo, desplazarse, hacer clic, etc.).
    • Si la propiedad modal es true, el elemento se adjuntará al primer plano del DOM y un bloqueador de superposición se colocará detrás de él, deteniendo la propagación de todos los eventos:

    EXAMPLE
    TS
    HTML
    SCSS

    Referencias de API

    Recursos adicionales