Cubrir

    El servicio de superposición proporciona una manera fácil y rápida de representar dinámicamente contenido en primer plano de una aplicación. El contenido que se va a representar, así como la forma en que se presenta (por ejemplo, ubicación, animaciones, comportamientos de desplazamiento y clic) son altamente configurables y pueden adaptarse a todos los escenarios posibles. El servicio de superposición está completamente integrado en la directiva de alternancia.

    Angular Overlay Example

    Getting Started

    Primero necesitamos importar elIgxOverlayService en el componente yinject una referencia a él en el constructor del componente:

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

...

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

...

    Displaying Content

    El servicio de superposición puede usarse para mostrar dinámicamente unHTMLNode o incluso un componente Angular conectándolo al DOM superpuesto.

    Una vez establecida una referencia al servicio Overlay, puede usarse para mostrar o ocultar contenido dinámicamente. Por ejemplo, podemos pasar un componente Angular en elattach método. Esto generará un ID único, que podemos pasar alshow método para mostrar el componente. Al mostrar un componente Angular debe pasarse un segundo parámetroViewContainerRef obligatorio en elattach 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>

    Si queremos pasar un ya existenteElementRef de la página a laIgxOverlayService, podemos hacerlo de la siguiente manera:

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

    El método delattach() Servicio de Superposición tiene dos sobrecargas:

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

    El primer parámetro en ambas sobrecargas es obligatorio y representa el contenido que se mostrará en la superposición. Hay un par de escenarios diferentes en los que se puede transmitir el contenido:

    • Una definición de componente - Al pasar un componente como primer argumento, el servicio superpuesto crea una nueva instancia de ese componente y loElementRef conecta dinámicamente aloverlay DOM. Este método también acepta un segundo parámetroViewContainerRef obligatorio, que es una referencia al contenedor donde se insertará la vista anfitriona del componente creado.
    • AnElementRef a un elemento DOM existente (ilustrado en el ejemplo anterior) - Cualquier vista que ya esté representada en la página puede pasar por el servicio de superposición y ser representada en el DOM de superposición.

    En ambos casos, elattach() método será:

    • Obtenga la referencia a la vista pasada de Angular
    • Separe la vista del DOM y deje un ancla en su lugar
    • Reconecta la vista a la superposición usando las proporcionadasOverlaySettings o vuelve a las superpuestas predeterminadas

    Llamando entoncesshow(id) se reproduce la animación de apertura, si la hay, y muestra el contenido adjunto. Callinghide(id) reproduce la animación de cerrar, si la hay, y oculta el contenido adjunto.

    Finalmente, llamardetach(id) el método volverá a acoplar la vista a su ubicación original en el DOM. Si se proporcionó un componente alattach() método, la llamadadetach(id) destruirá la instancia creada.

    Attaching Components

    En la siguiente demostración, podemos pasar el componente IgxCard a través del método delattach() Servicio de Superposición para generar un ID. Luego llamamos alshow() método con el ID proporcionado para acoplar dinámicamente la tarjeta al DOM en un contenedor modal.

    Overlay Settings

    Elattach() método también acepta un objeto de eseOverlaySettings tipo, que configura la forma en que se muestra el contenido. Si no se proporciona ningún objeto de este tipo, el Servicio de Superposición usará sus configuraciones predeterminadas para renderizar el contenido pasado.

    Por ejemplo, si queremos que el contenido se posicione respecto a un elemento, podemos pasar un ytarget diferentepositioningStrategy alattach() método, por ejemploConnectedPositioningStrategy, Para configurar cómo se muestra el componente, primero necesitamos crear unOverlaySettings objeto:

    // my-overlay-component.component.ts
// import the ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular';
// 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>

    Al hacer clic en el botón apareceráMyDynamicComponent ahora posicionado en relación con el botón.

    Preset Overlay Settings

    LosIgxOverlayService.createAbsolutePositionSettings() métodos yIgxOverlayService.createRelativePositionSettings() ofrecen una forma sencilla de crear unOverlaySettings conjunto de configuración basado en conjuntos de configuración predefinidos.

    ElIgxOverlayService.createAbsolutePositionSettings() método crea no modalesOverlaySettings conGlobalPositionStrategy oContainerPositionStrategy en caso de que se proporcione eloutlet parámetro. LaAbsolutePosition enumeración define las posibles posiciones para elegir:Center,Top oBottom. La posición por defecto esCenter.

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

    ElIgxOverlayService.createRelativePositionSettings() método creaOverlaySettings conAutoPositionStrategy,ConnectedPositioningStrategy oElasticPositionStrategy. Acepta objetivo, posición y estrategia. Eltarget es el punto o elemento de unión que el componente debe mostrar. Esposition una enumeración con las siguientes opciones:RelativePosition,Above,Below,yBefore​After.Default LaDefault opción coloca el elemento debajo del objetivo, alineado a la izquierda. La estrategia de posición puede establecerse mediante laRelativePositionStrategy enumeración, cuál esAuto el valor por defecto.

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

    Demo

    Hiding the Overlay

    Ocultahide(id) el contenido de la superposición. Todos los elementos generados por el servicio superpuesto tienen un ID único, asignado por el servicio. Elattach() método devuelve el identificador del contenido renderizado. Para ocultar el contenido, este ID debe pasarse al método dehide(id) la superposición. Se podría usar el método para ocultar todashideAll() las superposiciones.

    Cuando el contenido renderizado ya no es necesariodetach(id), se debe llamar al método. Este método elimina el contenido de la superposición y, si procede, lo vuelve a adjuntar a su ubicación original en el DOM.detach(id) también acepta como parámetro obligatorio el ID generado a partir delattach() método. Para eliminar todas las superposicionesdetachAll() se podría llamar al método.

    Podemos modificar el método de superposición previamente definido para no solo mostrar sino también ocultar el elemento de superposición.

    // my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular';
// 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 eloverlaySettings parámetro delattach() método, podemos cambiar cómo se muestra el contenido, por ejemplo, dónde está posicionado, cómo debe comportarse el desplazamiento y si el contenedor es modal o no

    Si no hay configuraciones overlaySettings, el elemento desactivado obtiene la configuración de pantalla predeterminada:

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

    Integration with igxToggle

    ElIgxToggleDirective está completamente integrado con elIgxOverlayService. Por ello, el método detoggle() la Directiva de Alternancia permite pasar configuraciones de superposición personalizadas al activar el contenido.

    A continuación se muestra un ejemplo de cómo pasar ajustes de configuración al método de alternancia:

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

    Si muestras la superposición en una toma y si la toma es hija de un elemento con transformación, perspectiva o filtro configurados en el CSS, no podrás mostrar la superposición modal. La razón de esto es que si se activa una de las propiedades CSS mencionadas anteriormente, el navegador crea un nuevo bloque contenedor y la superposición se limita a este bloque contenedor, tal y como se describe en la documentación de posición MDN.

    API References

    Additional Resources