Estrategias de Posicionamiento

    Position strategies determine where the content is displayed in the provided IgxOverlayService. By default, the content is positioned in the middle of the screen.

    Angular Ejemplo de Estrategias de Posicionamiento

    Descripción general de las estrategias

    Hay cinco estrategias de posicionamiento:

    Global

    Positions the content, based on the directions passed in through positionSettings. These are Left/Center/Right for horizontalDirection and Top/Middle/Bottom for verticalDirection. Defaults are:

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

    Envase

    Positions the content as GlobalPositionStrategy. Instead of position related to the screen ContainerPositionStrategy positions the content related to the provided in OverlaySettings outlet. Defaults are:

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

    Conectado

    Positions the element based on the start point from overlaySettings and directions passed in through positionSettings. It is possible to either pass a start point (type Point) or an HTMLElement as a positioning base. Defaults are:

    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

    Elástico

    Positions the element like the Connected positioning strategy and re-sizes the element to fit inside the view port (re-calculating width and/or height) in case the element is partially out of view. minSize can be passed in positionSettings to prevent resizing if it would put the element's dimensions below a certain threshold. Defaults are:

    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 }
    Nota

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

    Nota

    The overlay element will be resized, but the positioning strategy does not handle overflow. For example, if the element needs to have overflow-y when resized, incorporate the appropriate style to provide that.

    Uso

    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

    Then specify the positioning strategy to be used by the overlay. The position strategy is passed in as a property in the overlaySettings parameter when the overlay.attach() method is called. In the example below we are changing the default GlobalPositionStrategy with 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);

    Configuración de posicionamiento

    Each positioning strategy has its own positioning settings. These settings determine how the content will be shown. In the example below, we are creating a new PositionSettings object. Using it we force the overlay to show the content starting from the top right point of the provided target - the buttonElement. The direction in which the content is shown is set to top-left. Then we create a new ConnectedPositionStrategy and pass it the 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);

    Estrategias cambiantes

    You can also change the positioning strategy, used by the overlay, by overriding the positionStrategy property of the overlaySettings object that is passed to the overlay:

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

    Cambiar la configuración

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

    Contenido compensado

    The setOffset method enables precise adjustment of content positioning along the corresponding axis by a specified amount. Additionally, it supports an optional offsetMode parameter, providing control over how offset values are applied.

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

    Referencias de API

    Recursos adicionales