Estrategias de Posicionamiento

    Las estrategias de posición determinan dónde se muestra el contenido en el documento proporcionadoIgxOverlayService. Por defecto, el contenido está situado en el centro de la pantalla.

    Angular Positioning Strategies Example

    Strategies Overview

    Hay cinco estrategias de posicionamiento:

    Global

    Posiciona el contenido según las instrucciones que se hayan transmitidopositionSettings. Estos son Izquierda/Centro/Derecha parahorizontalDirection y Arriba/Medio/Abajo paraverticalDirection. Los valores predeterminados son:

    Dirección horizontal dirección vertical
    Alineación.Horizontal.Centro Alineación vertical.Medio

    Container

    Posiciona el contenido comoGlobalPositionStrategy. En lugar de posiciones relacionadas con la pantallaContainerPositionStrategy, el contenido relacionado con lo proporcionado enOverlaySettings outlet. Los valores predeterminados son:

    Dirección horizontal dirección vertical
    Alineación.Horizontal.Centro Alineación vertical.Medio

    Connected

    Posiciona el elemento en función del punto deoverlaySettings inicio y de las direcciones por las quepositionSettings se ha pasado. Es posible pasar por un punto de inicio (tipoPoint) o comoHTMLElement base de posicionamiento. Los valores predeterminados son:

    objetivo Dirección horizontal dirección vertical punto de inicio horizontal verticalPuntoInicio
    nuevo punto(0, 0) Alineación Horizontal.Derecha Alineación vertical.Inferior Alineación Horizontal.Izquierda Alineación vertical.Inferior

    Auto

    Posiciona el elemento de la misma manera que la estrategia de posicionamiento Conectado. También calcula un punto de partida diferente en caso de que el elemento salga parcialmente de la ventana gráfica. Inicialmente, la estrategia Automática intentará mostrar el elemento como lo hace la estrategia Conectada. Si el elemento sale de la ventana gráfica, Auto invertirá el punto inicial y la dirección, es decir, si la dirección es "abajo", la cambiará a "arriba" y así sucesivamente. Después de voltear, si el elemento todavía está fuera de la ventana gráfica, Auto utilizará las direcciones iniciales y el punto de partida para empujar el elemento hacia la ventana gráfica. Por ejemplo, si el elemento sale del lado derecho de la ventana gráfica, 50 px, Auto lo empujará 50 px hacia la izquierda. Luego, si el elemento está parcialmente fuera de la ventana gráfica, entonces su altura o ancho eran mayores que los de la ventana gráfica, Auto alineará el borde izquierdo/superior del elemento con el borde izquierdo/superior de la ventana gráfica. Los valores predeterminados son:

    objetivo Dirección horizontal dirección vertical punto de inicio horizontal verticalPuntoInicio
    nuevo punto(0, 0) Alineación Horizontal.Derecha Alineación vertical.Inferior Alineación Horizontal.Izquierda Alineación vertical.Inferior

    Elastic

    Posiciona el elemento como en la estrategia de posicionamiento Connected y redimensiona el elemento para que encaje dentro del visor (recalculando el ancho y/o la altura) en caso de que el elemento esté parcialmente fuera de la vista.minSize puede pasarse parapositionSettings evitar un redimensionamiento si eso pondría las dimensiones del elemento por debajo de cierto umbral. Los valores predeterminados son:

    objetivo Dirección horizontal dirección vertical punto de inicio horizontal verticalPuntoInicio tamaño mínimo
    nuevo punto(0, 0) Alineación Horizontal.Derecha Alineación vertical.Inferior Alineación Horizontal.Izquierda Alineación vertical.Inferior { ancho: 0, alto: 0 }
    Note

    No intentará cambiar el tamaño del elemento si la estrategia utiliza HorizontalDirection = Center / VerticalDirection = Middle.

    Note

    El elemento superpuesto se redimensionará, pero la estrategia de posicionamiento no se encargaoverflow de la situación. Por ejemplo, si el elemento necesita teneroverflow-y al redimensionarse, incorpora el estilo adecuado para proporcionarlo.

    Usage

    Las estrategias de posición le permiten mostrar contenido en la superposición en varias combinaciones. Para comenzar a usar diferentes estrategias de posición, primero debes incluir las dependencias necesarias para cada estrategia usada de esta manera:

    import {
    AutoPositionStrategy,
    ConnectedPositioningStrategy,
    ContainerPositionStrategy,
    ElasticPositionStrategy,
    GlobalPositionStrategy
} from 'igniteui-angular/core';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

    Luego especifica la estrategia de posicionamiento que usará la superposición. La estrategia de posición se transmite como una propiedad en eloverlaySettings parámetro cuando se llama aloverlay.attach() método. En el ejemplo siguiente cambiamos el valor por defectoGlobalPositionStrategy con:ConnectedPositionStrategy​

    // Initialize and use overlay settings
const overlaySettings: OverlaySettings = {
    // Set the target where content should be shown
    target: this.buttonElement.nativeElement,
    // Pass in the positioning strategy
    positionStrategy: new ConnectedPositioningStrategy()
};
this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, overlaySettings);

    Positioning Settings

    Cada estrategia de posicionamiento tiene sus propios ajustes de posicionamiento. Estas configuraciones determinan cómo se mostrará el contenido. En el ejemplo siguiente, estamos creando un nuevoPositionSettings objeto. Usándolo, forzamos la superposición a mostrar el contenido empezando desde el punto superior derecho de la versión proporcionadatarget: elbuttonElement. La dirección en la que se muestra el contenido se establece en la esquina superior izquierda. Luego creamos una nuevaConnectedPositionStrategy y la pasamos.positionSettings​

    const positionSettings: PositionSettings = {
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalStartPoint: VerticalAlignment.Top,
    horizontalDirection: HorizontalAlignment.Left,
    verticalDirection: VerticalAlignment.Top
};

const strategy = new ConnectedPositioningStrategy(positionSettings);

// Initialize and use overlay settings
const overlaySettings: OverlaySettings = {
    target: buttonElement.nativeElement,
    // Pass in the positioning strategy
    positionStrategy: strategy
};
this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, overlaySettings);

    Changing Strategies

    También puedes cambiar la estrategia de posicionamiento, usada por la superposición, sobrescribiendo lapositionStrategy propiedad deloverlaySettings objeto que se pasa a la superposición:

    const myPositionStrategy = new AutoPositionStrategy();
overlay.attach(element, { positionStrategy: myPositionStrategy });

    Changing Settings

    Para cambiar la configuración de posición de una estrategia ya existente, anule cualquiera de las configuraciones que contiene. Si ya se adjuntó una estrategia, debe separar el ID generado anteriormente:

    // overlaySettings is an existing object of type OverlaySettings
// overlaySettings.positionStrategy is an existing PositionStrategy with settings of type PositionSettings
Object.assign(overlaySettings.positionStrategy.settings, {
    horizontalStartPoint: HorizontalAlignment.Left,
    horizontalDirection: HorizontalAlignment.Left
});
overlaySettings.target = dummyHTMLElement;
// the element will now start to the left of the target (dummyHTMLElement)
// and will align itself to the left
const overlayId = overlay.attach(overlayId, overlaySettings);
overlay.show(overlayId);

    Offsetting Content

    ElsetOffset método permite ajustar con precisión la posición del contenido a lo largo del eje correspondiente en una cantidad especificada. Además, soporta un parámetro opcionaloffsetMode, que permite controlar cómo se aplican los valores de desplazamiento.

    // deltaX and deltaY determine the amount by which the content will be offset.
// Using OffsetMode.Add to add the values (default behavior)
const deltaX: number = 30;
const deltaY: number = 15;
overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Add);

    // deltaX and deltaY determine the exact position to set the content to, relative to its target element.
// Using OffsetMode.Set to set the offset to specific values
const deltaX: number = 30;
const deltaY: number = 15;
overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set);

    API References

    Additional Resources