Recobrir

O serviço de sobreposição fornece uma maneira fácil e rápida de renderizar dinamicamente o conteúdo no primeiro plano de um aplicativo. O conteúdo a ser renderizado, também a maneira como ele renderiza (por exemplo, posicionamento, animações, comportamentos de rolagem e clique) são altamente configuráveis e capazes de corresponder a todos os cenários possíveis. O serviço de sobreposição é totalmente integrado na diretiva toggle.

Angular Overlay Example

Getting Started

Primeiro, precisamos importar oIgxOverlayService no componente einject uma referência a ele no construtor do componente:

import { Inject } from '@angular/core'
import { IgxOverlayService } from `igniteui-angular`;

...

export class MyOverlayComponent {
    constructor(
        @Inject(IgxOverlayService) private overlayService: IgxOverlayService
    ) {}
}

...

Displaying Content

O serviço de sobreposição pode ser usado para exibir dinamicamente umHTMLNode ou até mesmo um componente Angular ao conectá-lo ao DOM sobreposto.

Após a criação de uma referência ao serviço Overlay, ela pode ser usada para exibir/ocultar conteúdo dinamicamente. Por exemplo, podemos passar um componente Angular noattach método. Isso gerará um ID único, que podemos passar para oshow método exibir o componente. Ao exibir um Componente Angular, um segundo parâmetroViewContainerRef obrigatório deve ser passado noattach método.

// my-overlay-component.component.ts
import { MyDynamicComponent } from '../my-dynamic-component/my-dynamic-component.component';

@Component({...})
export class MyOverlayComponent {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    constructor(
        @Inject(IgxOverlayService) private overlayService: IgxOverlayService,
        private viewContainerRef: ViewContainerRef
    ) {}

    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef);
        }
        this.overlayService.show(this._overlayId);
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
    <button (click)="showInOverlay()">Show Overlay</button>
</div>

Se quisermos passar um já existenteElementRef da página para o,IgxOverlayService podemos fazer da seguinte forma:

<!-- my-overlay-component.component.html -->
<div class='content'>
    <button (click)="showInOverlay()">Show Overlay</button>
</div>
<div>
    <img #exampleImage width='200px' src='../assets/example.png' title='Click Me!'>
</div>

// my-overlay-component.component.ts
import { Inject, ViewChild } from '@angular/core'

@Component({...})
export class MyOverlayComponent {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    @ViewChild('exampleImage', {read: ElementRef})
    private exampleImage: ElementRef;
    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(this.exampleImage);
        }
        this.overlayService.show(this._overlayId);
    }
}

O método doattach() Overlay Service possui duas sobrecargas:

• attach(element, settings?)
• attach(component, viewContainerRef, settings?)

O primeiro parâmetro em ambas as sobrecargas é obrigatório e representa o conteúdo que será mostrado na sobreposição. Há alguns cenários diferentes de como o conteúdo pode ser passado:

• Definição de componente - Ao passar um componente como primeiro argumento, o serviço de sobreposição cria uma nova instância desse componente e oElementRef anexa dinamicamente aooverlay DOM. Esse método também aceita um segundo parâmetroViewContainerRef obrigatório, que é uma referência ao contêiner onde a visualização host do componente criado será inserida.
• AnElementRef para um elemento DOM existente (ilustrado no exemplo acima) - Qualquer visualização já renderizada na página pode ser passada pelo serviço de sobreposição e renderizada no DOM de sobreposição.

Em ambos os casos, oattach() método irá:

• Obter a referência para a visualização passada do Angular
• Desanexe a visualização do DOM e deixe uma âncora em seu lugar
• Reanexe a visualização à sobreposição usando as sobreposições fornecidasOverlaySettings ou volte para as sobreposições padrão

Chamando,show(id) então, reproduz a animação de abertura, se houver, e mostra o conteúdo anexado. Callinghide(id) vai tocar animação de fechamento, se houver, e vai esconder o conteúdo anexado.

Finalmente, chamardetach(id) o método reanexará a visualização de volta à sua localização original no DOM. Se um componente foi fornecido aoattach() método, chamardetach(id) a instância será destruída.

Attaching Components

Na demonstração abaixo, podemos passar o componente IgxCard pelo método doattach() Overlay Service para gerar um ID. Depois, chamamos oshow() método com o ID fornecido para anexar dinamicamente o cartão ao DOM em um contêiner modal.

Overlay Settings

Oattach() método também aceita um objeto doOverlaySettings tipo, que configura a forma como o conteúdo é exibido. Se nenhum objeto desse tipo for fornecido, o Serviço de Sobreposição usará suas configurações padrão para renderizar o conteúdo passado.

Por exemplo, se quisermos que o conteúdo seja posicionado em relação a um elemento, podemos passar um etarget diferentepositioningStrategy para oattach() método, por exemploConnectedPositioningStrategy, Para configurar como o componente é mostrado, precisamos criar umOverlaySettings objeto primeiro:

// my-overlay-component.component.ts
// import the ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyOverlayComponent {

    @ViewChild(`myAnchorButton`)
    private myAnchorButton: ElementRef;
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef, {
                target: this.myAnchorButton.nativeElement,
                positionStrategy: new ConnectedPositioningStrategy()
            });
        }
        this.overlayService.show(this._overlayId);
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
<button #myAnchorButton (click)="showInOverlay()">Show Overlay</button>
</div>

Clicar no botão agora mostraráMyDynamicComponent posicionamento em relação ao botão.

Preset Overlay Settings

OsIgxOverlayService.createAbsolutePositionSettings() métodos eIgxOverlayService.createRelativePositionSettings() oferecem uma maneira fácil de criar umOverlaySettings baseado em conjuntos de configurações predefinidos.

OIgxOverlayService.createAbsolutePositionSettings() método cria não modalOverlaySettings comGlobalPositionStrategy ouContainerPositionStrategy no caso dooutlet parâmetro ser fornecido. AAbsolutePosition enumeração define as posições possíveis para escolher:Center,Top ouBottom. A posição padrão éCenter.

const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

OIgxOverlayService.createRelativePositionSettings() método criaOverlaySettings comAutoPositionStrategy,ConnectedPositioningStrategy ouElasticPositionStrategy. Aceita alvo, posição e estratégia. Étarget o ponto ou elemento de fixação para o componente mostrar. Éposition uma enumeração com as seguintes opções:RelativePosition,Above,Below,eBefore​After.Default ADefault opção posiciona o elemento abaixo do alvo, alinhado à esquerda. A estratégia de posição pode ser definida por meio daRelativePositionStrategy enumeração, qual éAuto o valor padrão.

const targetElement = this.myAnchorButton.nativeElement;
const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
        targetElement,
        RelativePosition.Above,
        RelativePositionStrategy.Connected);

Demo

Hiding the Overlay

Elehide(id) esconde o conteúdo da sobreposição. Todos os elementos renderizados pelo serviço de sobreposição possuem um ID único, atribuído a eles pelo serviço. Oattach() método retorna o identificador do conteúdo renderizado. Para ocultar o conteúdo, esse ID precisa ser passado para o método dahide(id) sobreposição. Para esconder todas ashideAll() sobreposições poderia ser chamado.

Quando o conteúdo renderizado não é maisdetach(id) necessário, o método deve ser chamado. Esse método remove o conteúdo da sobreposição e, se aplicável, o reanexa à sua localização original no DOM.detach(id) o método também aceita como parâmetro obrigatório o ID gerado a partir doattach() método. Para remover todas as sobreposiçõesdetachAll(), pode-se chamar o método.

Podemos modificar o método de sobreposição definido anteriormente para não apenas mostrar, mas também ocultar o elemento de sobreposição

// my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class MyOverlayComponent implements OnDestroy {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service
    private _overlayShown = false; // Is the component rendered in the Overlay?

    @ViewChild(`myAnchorButton`)
    private myAnchorButton: ElementRef;

    public toggleOverlay() {
        if (!this._overlayShown) { // If the element is not visible, show it
            //  generate ID
            if (!this._overlayId) {
                this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef, {
                    target: this.myAnchorButton.nativeElement,
                    positionStrategy: new ConnectedPositioningStrategy({
                        closeOnOutsideClick: false, // overlay will not close on outside clicks
                        modal: false // overlay content will not be rendered in a modal dialog
                    }) // The attach method returns an ID that can be used to reference the shown content
                });
            }

            this.overlayService.show(this._overlayId);
        } else {
            this.overlayService.hide(this._overlayId); // If element if visible, hide it
        }
        this._overlayShown = !this._overlayShown;
    }

    // finally detach overlay content
    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
    <button #myAnchorButton (click)="toggleOverlay()">Toggle Overlay</button>
</div>

Attaching Settings

Usando ooverlaySettings parâmetro doattach() método, podemos mudar como o conteúdo é mostrado – por exemplo, onde o conteúdo está posicionado, como o rolo deve se comportar e se o contêiner é modal ou não

Se nenhum overlaySettings elemento estiver configurado, o elemento alternado recebe as configurações padrão de exibição:

defaultOverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new NoOpScrollStrategy(),
    modal: true,
    closeOnOutsideClick: true,
    closeOnEscape: false
};

Integration with igxToggle

OIgxToggleDirective está totalmente integrado com oIgxOverlayService. Assim, o método datoggle() Diretiva de Alternar permite que configurações de sobreposição personalizadas sejam passadas ao alternar o conteúdo.

Um exemplo de como passar configurações para o método toggle é mostrado abaixo:

<!-- In example.component.html -->
<div>
    <button igxToggle (click)="callToggle()">Click me!</button>
    <div [style.visibility]="collapsed ? 'hidden ' : 'visible'">
        This content is toggle-able!
    </div>
</div>

// example.component.ts
@Component({
    selector: `example-component`,
    template: `example.component.html`
})
export class ExampleComponent {
    @ViewChild(IgxToggleDirective)
    private toggleDirective: IgxToggleDirective;

    public get collapsed(): boolean {
        return this.toggleDirective.collapsed;
    }

    public callToggle(): void {
        const overlaySettings: OverlaySettings = {
            positionStrategy: new AutoPositionStrategy(),
            scrollStrategy: new BlockScrollStrategy(),
            modal: true,
            closeOnOutsideClick: false
        }
        this.toggleDirective.toggle(overlaySettings)
    }
}

Assumptions and Limitations

Se você mostrar a sobreposição em uma tomada, e se a tomada for filho de um elemento com transformação, perspectiva ou filtro configurados no CSS, você não conseguirá mostrar a sobreposição modal. A razão para isso é que, se uma das propriedades CSS mencionadas acima for ativada, o navegador cria um novo bloco de contenção e a sobreposição fica limitada a esse bloco de contenção, conforme descrito na documentação de posição do MDN.

API References

• Serviço IgxOverlay
• Estilos IgxOverlay

Additional Resources

• Estratégias de posicionamento
• Estratégias de rolagem
• Tópico de estilo