Estratégias de Posicionamento

    As estratégias de posicionamento determinam onde o conteúdo é exibido no IgxOverlayService fornecido. Por padrão, o conteúdo é posicionado no meio da tela.

    Angular Positioning Strategies Example

    Strategies Overview

    Existem cinco estratégias de posicionamento:

    Global

    Posiciona o conteúdo, com base nas direções passadas por positionSettings. Elas são Left/Center/Right para horizontalDirection e Top/Middle/Bottom para verticalDirection. Os padrões são:

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

    Container

    Posiciona o conteúdo como GlobalPositionStrategy. Em vez de position related to the screen ContainerPositionStrategy posiciona o conteúdo relacionado ao fornecido em OverlaySettings outlet. Os padrões são:

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

    Connected

    Posiciona o elemento com base no ponto inicial de overlaySettings e direções passadas por positionSettings. É possível passar um ponto inicial (tipo Point) ou um HTMLElement como base de posicionamento. 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

    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

    Posiciona o elemento como a estratégia de posicionamento Connected e redimensiona o elemento para caber dentro da viewport (recalculando largura e/ou altura) caso o elemento esteja parcialmente fora de vista. minSize pode ser passado em positionSettings para evitar redimensionamento se ele colocar as dimensões do elemento abaixo de um certo limite. Os padrões são:

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

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

    Note

    O elemento de sobreposição será redimensionado, mas a estratégia de posicionamento não lida com overflow. Por exemplo, se o elemento precisa ter overflow-y quando redimensionado, incorpore o estilo apropriado para fornecer isso.

    Usage

    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';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

    Em seguida, especifique a estratégia de posicionamento a ser usada pela sobreposição. A estratégia de posição é passada como uma propriedade no parâmetro overlaySettings quando o método overlay.attach() é chamado. No exemplo abaixo, estamos alterando o padrão GlobalPositionStrategy com 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 estratégia de posicionamento tem suas próprias configurações de posicionamento. Essas configurações determinam como o conteúdo será exibido. No exemplo abaixo, estamos criando um novo objeto PositionSettings. Usando-o, forçamos a sobreposição a exibir o conteúdo começando do ponto superior direito do target fornecido - o buttonElement. A direção na qual o conteúdo é exibido é definida como superior esquerdo. Então, criamos uma nova ConnectedPositionStrategy e passamos a ela o 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

    Você também pode alterar a estratégia de posicionamento usada pela sobreposição substituindo a propriedade positionStrategy do objeto overlaySettings que é passado para a sobreposição:

    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

    O método setOffset permite o ajuste preciso do posicionamento do conteúdo ao longo do eixo correspondente por uma quantidade especificada. Além disso, ele suporta um parâmetro offsetMode opcional, fornecendo controle sobre como os valores de offset são aplicados.

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