Estrategias de Posicionamiento

    Las estrategias de posición determinan dónde se muestra el contenido en el IgxOverlayService proporcionado. De forma predeterminada, el contenido se coloca en el medio de la pantalla.

    Angular Positioning Strategies Example

    Strategies Overview

    Hay cinco estrategias de posicionamiento:

    Global

    Posiciona el contenido, según las instrucciones pasadas a través de positionSettings. Estos son Izquierda/Centro/Derecha para horizontalDirection y Superior/Medio/Abajo para verticalDirection. Los valores predeterminados son:

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

    Container

    Posiciona el contenido como GlobalPositionStrategy. En lugar de la posición relacionada con la pantalla ContainerPositionStrategy coloca el contenido relacionado con la outlet proporcionada en OverlaySettings. Los valores predeterminados son:

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

    Connected

    Coloca el elemento según el punto inicial de overlaySettings y las direcciones pasadas a través de positionSettings. Es posible pasar un punto de inicio (escriba Point) o un HTMLElement como 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

    Coloca el elemento como la estrategia de posicionamiento Conectado y cambia el tamaño del elemento para que quepa dentro del puerto de visualización (recalculando el ancho y/o el alto) en caso de que el elemento esté parcialmente fuera de la vista. minSize se puede pasar en positionSettings para evitar el cambio de tamaño si colocaría las dimensiones del elemento por debajo de un 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

    ​Se cambiará el tamaño del elemento superpuesto, pero la estrategia de posicionamiento no maneja overflow. Por ejemplo, si el elemento necesita tener overflow-y al cambiar su tamaño, incorpore el estilo apropiado 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';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

    Luego especifique la estrategia de posicionamiento que utilizará la superposición. La estrategia de posición se pasa como una propiedad en el parámetro overlaySettings cuando se llama al método overlay.attach(). En el siguiente ejemplo, cambiamos la GlobalPositionStrategy predeterminada por 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 siguiente ejemplo, estamos creando un nuevo objeto PositionSettings. Al usarlo, forzamos la superposición a mostrar el contenido comenzando desde el punto superior derecho del target proporcionado: el buttonElement. La dirección en la que se muestra el contenido está configurada en la parte superior izquierda. Luego creamos una nueva ConnectedPositionStrategy y le 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 puede cambiar la estrategia de posicionamiento utilizada por la superposición, anulando la propiedad positionStrategy del objeto overlaySettings 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

    El setOffset método permite un ajuste preciso del posicionamiento del contenido a lo largo del eje correspondiente en una cantidad específica. Además, admite un parámetro opcional offsetMode, que proporciona control sobre 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