Estilo de superposición

    IgxOverlayServicese utiliza para mostrar contenido por encima del contenido de la página. Muchos Ignite UI for Angular componentes usan la superposición —Desplegable, Combo, Selector de Fecha y más— por lo que es importante entender cómo muestra el contenido la superposición. Para mostrar el contenido por encima de otros elementos, el servicio lo mueve a un contenedor especial de salida (que se adjunta por defecto al final del cuerpo del documento). Este comportamiento puede afectar a estilos que se asignan a 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 tomas superpuestas. Por ejemplo, echemos un vistazo a un Drop Down, diseñado por el globalcss-vars mixin:

    <!-- 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(
  $background-color: #efefef
);

@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, por lo que pueden coincidir con cualquier elemento de la página, incluidoigx-drop-down-item el servicio trasladado a la salida de superposición.

    Scoped Component Styles

    Al definir estilos de alcance para los elementos que se muestran en la superposición, debemos especificar la posición de la superposiciónoutlet en la DOM. CSS las reglas que se alcanzan requieren una estructura jerárquica específica de los elementos: debemos asegurarnos de que el contenido de la superposición se muestre en el contexto correcto de los estilos que queremos aplicar.

    Por ejemplo, tomemos losigx-combo​ ​estilos de objetos que usan eligx-drop-down tema, porque la combinación define su contenido dentro de su propia vista.

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

    Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación use::ng-deep para aplicar los estilos.

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

    Los elementos de la lista de nuestro combo no son descendientes de nuestro componentehost; actualmente se muestran en la salida de superposición predeterminada, al final del cuerpo del documento. Puedes cambiar esto usando laoutlet propiedad en laoverlaySettings. Losoutlet controles donde debe renderizarse el contenedor de superposición.

    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 explicado cómoViewEncapsulation funciona junto con la propiedad deoutlet la superposición, podemos ver cómo podemos estilizar el envoltorio de la propia superposición. Exponeoverlay-theme una única propiedad -$background-color, que afecta al color del fondo cuando la superposición está configurada enmodal: 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);

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

    Note

    Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación use::ng-deep para aplicar los estilos.

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

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

    API References

    Additional Resources