Estilo de superposición
IgxOverlayService
se utiliza para mostrar contenido sobre el contenido de la página. Muchos Ignite UI for Angular componentes utilizan la superposición (menú 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 por encima de 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.
Componentes de superposición de estilos
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>
html
@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);
scss
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.
Estilos de componentes con alcance
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.
// overlay-styling.component.scss
@include css-vars($my-drop-down-theme);
scss
Si el componente usa un Emulated
ViewEncapsulation, es necesario usar penetrate
esta encapsulación::ng-deep
para aplicar los estilos.
// overlay-styling.component.scss
:host {
::ng-deep {
@include css-vars($my-drop-down-theme);
}
}
scss
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>
html
export class OverlayStylingComponent {
...
constructor(public element: ElementRef) {
}
}
typescript
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:
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Diseñar la superposición
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
.
Estilos globales
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);
scss
Ahora todas las superposiciones modales tendrán un tinte púrpura en su fondo.
Si el componente usa un Emulated
ViewEncapsulation, es necesario usar penetrate
esta encapsulación::ng-deep
para aplicar los estilos.
// overlay-styling.component.scss
:host {
::ng-deep {
@include css-vars($my-overlay-theme);
}
}
scss
Estilos de superposición con alcance
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);
}
scss
Referencias de API
Recursos adicionales
- IgniteUI para Angular: biblioteca de temas
- Tema principal de superposición
- Estrategias de posición
- Estrategias de desplazamiento