Estilo de sobreposição

    IgxOverlayServiceé usado para exibir conteúdo acima do conteúdo da página. Muitos Ignite UI for Angular componentes 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 recipiente especial de saída (anexado no final do corpo do documento, por padrão). Esse comportamento pode afetar estilos direcionados a um contêiner específico.

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

:host {
  @include tokens($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, podendo assim corresponder a qualquer elemento da página, incluindoigx-drop-down-item o serviço movido para a tomada de sobreposição.

    Scoped Component Styles

    Ao definir estilos de escopo para elementos exibidos na sobreposição, precisamos especificar a posição da sobreposiçãooutlet na DOM. CSS regras que são escopadas 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 osigx-combo​ ​estilos de itens que usam oigx-drop-down tema, porque a combinação define seu conteúdo dentro de sua própria visão.

    // overlay-styling.component.scss

:host {
  @include tokens($my-drop-down-theme);
}
    Note

    Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::ng-deep para aplicar os estilos.

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

    Os itens na lista do nosso combo não são descendentes do nosso componentehost— eles estão sendo exibidos atualmente na saída de sobreposição padrão, no final do corpo do documento. Você pode mudar isso usando aoutlet propriedade naoverlaySettings área. Osoutlet controles 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 abordamos comoViewEncapsulation funciona junto com a propriedade daoutlet sobreposição, podemos analisar como podemos estilizar a própria capa da sobreposição. Eleoverlay-theme expõe uma única propriedade -$background-color, que afeta a cor do fundo quando a sobreposição é definida paramodal: 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)
);

:host {
  @include tokens($my-overlay-theme);
}

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

    Note

    Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::ng-deep para aplicar os estilos.

    // overlay-styling.component.scss
:host {
  ::ng-deep { 
    @include tokens($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 tokens($my-overlay-theme);
}

    API References

    Additional Resources