Estilo de superposición

    IgxOverlayService se utiliza para mostrar contenido encima del contenido de la página. Muchos componentes Ignite UI for Angular utilizan la superposición (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 sobre 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.

    Styling Overlay Components

    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>

    @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(
    $palette: $my-custom-palette
);

@include css-vars($my-drop-down-theme);

    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.

    Scoped Component Styles

    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.

    Note

    Siempre alcance sus estilos en un selector:host para evitar que los estilos se filtren.

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

    Si la variable $legacy-support en su tema está configurada en true, debe darle estilo a su componente usando la función de tema del componente.

    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

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

    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>

    export class OverlayStylingComponent {
    ...
    constructor(public element: ElementRef) {
    }
}

    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:

    Styling The Overlay

    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.

    Global Styles

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

    Si la variable $legacy-support en su tema está configurada en true, debe darle estilo a su componente usando la función de tema de superposición.

    // styles.scss
...
@include overlay($my-overlay-theme);

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

    Scoped Overlay Styles

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

    Para asegurarse de que el tema no afecte a otros componentes de nuestra aplicación, utilice el selector:host.

    // overlay-styling.component.scss
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
...
:host {
    @include css-vars($my-overlay-theme);
}
    Note

    Si el componente utiliza una ViewEncapsulation Emulated y $legacy-support está configurado en true, use la función de tema de la superposición y penetrate en la encapsulación usando::ng-deep

    API References

    Additional Resources