Estilo de sobreposição

    IgxOverlayService é usado para exibir conteúdo acima do conteúdo da página. Muitos componentes Ignite UI for Angular usam a sobreposição -Drop Down, Combo, Date Picker e mais - então é importante entender como a sobreposição exibe o conteúdo. Para exibir o conteúdo acima de outros elementos, o serviço o move para um contêiner de saída especial (anexado ao final do corpo do documento, por padrão). Esse comportamento pode afetar estilos com escopo para contêiner específico.

    Styling Overlay Components

    Na maioria dos casos, os estilos de tema global não são afetados pelos outlets de sobreposição. Por exemplo, vamos dar uma olhada em um Drop Down, estilizado pelo 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(
  $background-color: #efefef
);

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

    Os estilos globais não são gerados sob uma regra de escopo e não são afetados por nenhum encapsulamento e, portanto, podem corresponder a qualquer elemento na página, incluindo igx-drop-down-item o serviço movido para o outlet de sobreposição.

    Scoped Component Styles

    Ao definir o escopo de estilos para elementos que são exibidos na sobreposição, precisamos especificar a posição da outlet da sobreposição no DOM. As regras CSS que são definidas no escopo exigem uma estrutura hierárquica específica dos elementos - precisamos garantir que o conteúdo da sobreposição seja exibido no contexto correto dos estilos que queremos aplicar.

    Por exemplo, vamos pegar o igx-combo- seus estilos de itens usam o tema igx-drop-down, porque o combo define seu conteúdo dentro de sua própria visualização.

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

    Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate nesse encapsulamento usando::ng-deep para aplicar os estilos.

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

    Os itens na lista do nosso combo não são descendentes do nosso host de componente - eles estão sendo exibidos atualmente no outlet de sobreposição padrão, no final do corpo do documento. Você pode alterar isso usando a propriedade outlet no overlaySettings. O outlet controla onde o contêiner de sobreposição deve ser renderizado.

    Aqui, podemos passar uma referência ao elemento onde gostaríamos que nosso contêiner estivesse:

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
</igx-combo>

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

    Agora, a lista de itens do combo é renderizada corretamente dentro do host do nosso componente, o que significa que nosso tema personalizado entrará em vigor:

    Styling The Overlay

    Agora que cobrimos como ViewEncapsulation funciona junto com a propriedade outlet da sobreposição, podemos dar uma olhada em como podemos estilizar o wrapper da sobreposição em si. O overlay-theme expõe uma única propriedade -$background-color, que afeta a cor do pano de fundo quando a sobreposição é definida como modal: true.

    Global Styles

    A maneira mais fácil de estilizar o modal de sobreposição é incluir seu tema nos estilos globais do nosso aplicativo:

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

@include css-vars($my-overlay-theme);

    Agora todas as sobreposições modais terão um tom roxo no fundo.

    Note

    Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate nesse encapsulamento usando::ng-deep para aplicar os estilos.

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

    Scoped Overlay Styles

    Se quisermos que nossa sobreposição tenha um plano de fundo específico somente sob um determinado componente, podemos definir o escopo do tema. Ao definir o escopo de uma sobreposição modal, você precisa mover a saída da sobreposição, que tem algumas limitações. Para minimizar os riscos de corte de estouro, z-index e problemas de viewport, recomendamos usar saídas para sobreposições modais somente em componentes de nível superior:

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

    API References

    Additional Resources