Estilo de superposición

    IgxOverlayService se utiliza para mostrar contenido sobre el contenido de la página. Muchos Ignite UI for Angular componentes utilizan la superposición (menú desplegable, combo, selector de fecha y más), por lo que es importante comprender cómo la superposición muestra el contenido. Para mostrar el contenido por encima de otros elementos, el servicio lo mueve a un contenedor de salida especial (adjunto al final del cuerpo del documento, de forma predeterminada). Este comportamiento puede afectar a los estilos cuyo ámbito es un contenedor específico.

    Componentes de superposición de estilos

    En la mayoría de los casos, los estilos de temas globales no se ven afectados por las salidas superpuestas. Por ejemplo, echemos un vistazo a un menú desplegable, diseñado según el mixin global css-vars:

    <!-- overlay-styling.component.html -->
    <igx-drop-down #customDropDown height="350px">
        <igx-drop-down-item *ngFor="let item of items" [value]="item.id">
            {{ item.name }}
        </igx-drop-down-item>
    </igx-drop-down>
    html
    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    
    $my-drop-down-theme: drop-down-theme(
      $background-color: #efefef
    );
    
    @include css-vars($my-drop-down-theme);
    scss

    Los estilos globales no se generan bajo una regla de alcance y no se ven afectados por ninguna encapsulación y, por lo tanto, pueden coincidir con cualquier elemento de la página, incluido igx-drop-down-item que el servicio movió a la salida de superposición.

    Estilos de componentes con alcance

    Al determinar el alcance de los estilos de los elementos que se muestran en la superposición, debemos especificar la posición de la outlet de superposición en el DOM. Las reglas CSS con alcance requieren una estructura jerárquica específica de los elementos; debemos asegurarnos de que el contenido superpuesto se muestre en el contexto correcto de los estilos que queremos aplicar.

    Por ejemplo, tomemos el igx-combo: sus estilos de elementos usan el tema igx-drop-down, porque el combo define su contenido dentro de su propia vista.

    // overlay-styling.component.scss
    @include css-vars($my-drop-down-theme);
    scss

    Si el componente usa un Emulated ViewEncapsulation, es necesario usar penetrate esta encapsulación::ng-deep para aplicar los estilos.

    // overlay-styling.component.scss
    :host {
      ::ng-deep { 
        @include css-vars($my-drop-down-theme);
      }
    }
    scss

    Los elementos de la lista de nuestro combo no son descendientes de nuestro host de componentes; actualmente se muestran en la salida superpuesta predeterminada, al final del cuerpo del documento. Puede cambiar esto utilizando la propiedad outlet en overlaySettings. La outlet controla dónde se debe representar el contenedor superpuesto.

    Aquí, podemos pasar una referencia al elemento donde nos gustaría que esté nuestro contenedor:

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
    </igx-combo>
    html
    export class OverlayStylingComponent {
      ...
      constructor(public element: ElementRef) {
      }
    }
    typescript

    Ahora, la lista de elementos del combo se representa correctamente dentro del host de nuestro componente, lo que significa que nuestro tema personalizado entrará en vigor:

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Diseñar la superposición

    Ahora que hemos cubierto cómo funciona ViewEncapsulation junto con la propiedad outlet de la superposición, podemos ver cómo podemos diseñar el contenedor de la superposición. El overlay-theme expone una única propiedad: $background-color, que afecta el color del fondo cuando la superposición se establece en modal: true.

    Estilos globales

    La forma más sencilla de diseñar el modal de superposición es incluir su tema en los estilos globales de nuestra aplicación:

    // styles.scss
    $my-overlay-theme: overlay-theme(
      $background-color: rgba(0, 153, 255, 0.3)
    );
    
    @include css-vars($my-overlay-theme);
    scss

    Ahora todas las superposiciones modales tendrán un tinte púrpura en su fondo.

    Si el componente usa un Emulated ViewEncapsulation, es necesario usar penetrate esta encapsulación::ng-deep para aplicar los estilos.

    // overlay-styling.component.scss
    :host {
      ::ng-deep { 
        @include css-vars($my-overlay-theme);
      }
    }
    scss

    Estilos de superposición con alcance

    Si queremos que nuestra superposición tenga un fondo específico solo bajo un determinado componente, podemos limitar el tema. Al determinar el alcance de una superposición modal, es necesario mover la salida de superposición, lo cual tiene algunas limitaciones. Para minimizar los riesgos de recorte de desbordamiento, índice z y problemas de ventana gráfica, recomendamos usar salidas para superposiciones modales solo en componentes de nivel superior:

    // styles.scss
    ...
    .purple {
      @include css-vars($my-overlay-theme);
    }
    scss

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales