Estratégias de Posicionamento

    As estratégias de posição determinam onde o conteúdo é exibido no documento fornecidoIgxOverlayService. Por padrão, o conteúdo está posicionado no centro da tela.

    Angular Positioning Strategies Example

    Strategies Overview

    Existem cinco estratégias de posicionamento:

    Global

    Posiciona o conteúdo, com base nas instruções passadas porpositionSettings dentro. Esses são Esquerda/Centro/Direita parahorizontalDirection e Cima/Meio/Baixo paraverticalDirection. Os padrões são:

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

    Container

    Posiciona o conteúdo comoGlobalPositionStrategy. Em vez de posição relacionada à telaContainerPositionStrategy, o conteúdo está relacionado ao fornecido emOverlaySettings outlet. Os padrões são:

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

    Connected

    Posiciona o elemento com base no ponto deoverlaySettings partida e nas direções por ondepositionSettings passou. É possível passar por um ponto de partida (tipoPoint) ou comoHTMLElement uma 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 janela de visualização (recalculando largura e/ou altura) caso o elemento esteja parcialmente fora de vista.minSize pode ser passado parapositionSettings evitar redimensionamento se isso colocar as dimensões do elemento abaixo de um certo limiar. 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 funciona​overflow. Por exemplo, se o elemento precisar teroverflow-y ao ser 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/core';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

    Depois, especifique a estratégia de posicionamento a ser usada pela sobreposição. A estratégia de posição é passada como uma propriedade nooverlaySettings parâmetro quando ooverlay.attach() método é chamado. No exemplo abaixo, estamos mudando o padrãoGlobalPositionStrategy comConnectedPositionStrategy:

    // 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 novoPositionSettings objeto. Usando-o, forçamos a sobreposição a mostrar o conteúdo começando no canto superior direito do fornecidotarget- obuttonElement. A direção em que o conteúdo é exibido está definida no canto superior esquerdo. Então criamos um novoConnectedPositionStrategy e passamos por elepositionSettings.

    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, sobrescrevendo apositionStrategy propriedade dooverlaySettings objeto que é passada 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

    OsetOffset método permite um ajuste preciso do posicionamento do conteúdo ao longo do eixo correspondente por uma quantidade especificada. Além disso, ele suporta um parâmetro opcionaloffsetMode, 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