Estratégias de Posicionamento

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 Positioning Strategies Example

Strategies Overview

Existem cinco estratégias de posicionamento:

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:

direção horizontal	DireçãoVertical
AlinhamentoHorizontal.Centro	AlinhamentoVertical.Meio

Container

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:

direção horizontal	DireçãoVertical
AlinhamentoHorizontal.Centro	AlinhamentoVertical.Meio

Connected

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:

alvo	direção horizontal	DireçãoVertical	ponto de partida horizontal	ponto de partida vertical
novo Ponto(0, 0)	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Bottom	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Bottom

Auto

Posiciona o elemento da mesma forma que a estratégia de posicionamento Connected. Ele também calcula um ponto de partida diferente caso o elemento saia parcialmente da janela de visualização. A estratégia Auto inicialmente tentará mostrar o elemento como a estratégia Connected faz. Se o elemento sair da janela de visualização, o Auto inverterá o ponto de partida e a direção, ou seja, se a direção for "inferior", ele a alternará para "superior" e assim por diante. Após a inversão, se o elemento ainda estiver fora da janela de visualização, o Auto usará as direções iniciais e o ponto de partida para empurrar o elemento para dentro da janela de visualização. Por exemplo, se o elemento sair do lado direito da janela de visualização, em 50px, o Auto o empurrará em 50px para a esquerda. Depois, se o elemento estiver parcialmente fora da janela de visualização, então sua altura ou largura forem maiores que as da janela de visualização, o Auto alinhará a borda esquerda/superior do elemento com a borda esquerda/superior da janela de visualização. Os padrões são:

alvo	direção horizontal	DireçãoVertical	ponto de partida horizontal	ponto de partida vertical
novo Ponto(0, 0)	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Bottom	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Bottom

Elastic

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:

alvo	direção horizontal	DireçãoVertical	ponto de partida horizontal	ponto de partida vertical	tamanho mínimo
novo Ponto(0, 0)	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Bottom	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Bottom	{ largura: 0, altura: 0 }

Observação

Ele não tentará redimensionar o elemento se a estratégia estiver usando HorizontalDirection = Center / VerticalDirection = Middle.

Observação

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

Estratégias de posicionamento permitem que você exiba conteúdo na sobreposição em várias combinações. Para começar a usar diferentes estratégias de posicionamento, você deve primeiro incluir as dependências necessárias para cada estratégia usada, assim:

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

Positioning Settings

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

Changing Strategies

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

Changing Settings

Para alterar as configurações de posição de uma estratégia já existente, substitua qualquer uma das configurações nela. Se uma estratégia já foi anexada, você deve desanexar o ID gerado 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

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

Referências de API

• Estratégia de posição IP

Recursos adicionais

• Sobreposição do tópico principal
• Estratégias de rolagem
• Tópico de estilo
• Serviço IgxOverlay
• Estilos IgxOverlay