Estilo de superposición

    IgxOverlayService is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - Drop Down, Combo, Date Picker and more - so it is important to understand how the overlay displays content. To display the content above other elements, the service moves it into a special outlet container (attached at the end of the document's body, by default). This behavior can affect styles scoped to specific container.

    Styling Overlay Components

    In most cases global theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, styled by the global css-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);

    The global styles are not generated under a scoped rule and are not affected by any encapsulation, and thus can match any element on the page, including igx-drop-down-item the service moved to the overlay outlet.

    Scoped Component Styles

    When scoping styles for elements that are displayed in the overlay, we need to specify to the position of the overlay outlet in the DOM. CSS rules that are scoped require a specific hierarchical structure of the elements - we need to make sure the overlay content is displayed in the correct context of the styles we want to apply.

    For example, let's take the igx-combo - its item styles use the igx-drop-down theme, because the combo defines its content inside of its own view.

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

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to apply the styles.

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

    The items in our combo's list are not descendants of our component host - they are currently being displayed in the default overlay outlet, at the end of the document's body. You can change this by using the outlet property in the overlaySettings. The outlet controls where the overlay container should be rendered.

    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

    Now that we've covered how ViewEncapsulation works along with the overlay's outlet property, we can take a look at how we can style the overlay's wrapper itself. The overlay-theme exposes a single property - $background-color, which affects the color of the backdrop when the overlay is set to 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);

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

    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to apply the styles.

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