Elevaciones en Ignite UI for Web Components
La implementación de Elevations en Ignite UI for Web Components se basa en Elevations in Material Design. Se utilizan para establecer y mantener límites funcionales entre los árboles del modelo de objetos de documento para permitir una mejor encapsulación funcional.
Descripción general
Las sombras Ignite UI for Web Components siguen de cerca las pautas de Material Design para establecer una jerarquía de profundidad basada en 25 niveles de elevación. El tamaño de la sombra proyectada está relacionado con el número del nivel de elevación. Cuanto mayor sea el número del nivel de elevación, más grande será la sombra. Las elevaciones en Ignite UI for Web Components se exponen como variables CSS. Cada variable almacena un conjunto de 3 box-shadows. Estas box-shadows representan los elementos de umbra, penumbra y antumbra que son propiedades de las sombras tal como se observan en el mundo real.
Aquí hay una lista de elevaciones en reposo utilizadas en varios componentes de Ignite UI for Web Components en el tema Bootstrap y sus correspondientes nombres de variables CSS:
| Componente | Nivel de elevación predeterminado | Variables CSS |
|---|---|---|
| Botón | 0 | --ig-elevación-0 |
| Tarjeta elevada | 2 | --ig-elevación-2 |
| Toast, Snackbar | 10 | --ig-elevation-10 |
| Navdrawer | 16 | --ig-elevación-16 |
Como puede ver en la columna Variable CSS, todas las elevaciones se definen en el siguiente formato--ig-elevation-[level]. Como se mencionó, el número del nivel de elevación va del 0 al 24 (inclusive).
Usage
Para comenzar a usar elevaciones en sus propios componentes, todo lo que necesita es hacer referencia al nombre de la variable del nivel deseado:
.custom-element {
box-shadow: var(--ig-elevation-6);
}
Cambiar la elevación en un tema de componente existente funciona de manera similar:
igc-navbar {
box-shadow: var(--ig-elevation-8);
}
Defining Elevations
La actualización de las elevaciones predeterminadas funciona de manera similar a la actualización de los colores de la paleta. Simplemente necesitas reasignar la variable a un valor diferente. Con elevaciones, asegúrese de que el valor sea box-shadow.
Ejemplo:
:root {
--ig-elevation-1: 0 2px 6px 0 rgba(0, 0, 0, .18);
--ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}
Ahora, todos los componentes que utilizan los niveles de elevación 1 y 2 tendrán sus sombras actualizadas.
Shadowing
Puede sombrear las elevaciones establecidas globalmente solo para un alcance específico. Ya vimos que el componente Snackbar y Toast usan el nivel de elevación 10. Para cambiar las sombras de ambos, todo lo que necesitas hacer es:
igc-snackbar,
igc-toast {
--ig-elevation-10: 0 3px 9px 0 rgba(0, 0, 0, .24);
}
Esto establecerá las sombras de las tostadas y de la cafetería en el valor asignado a--ig-elevation-10.
Using Elevation Factor
Además de los niveles de elevación, Ignite UI for Web Components expone una variable CSS que facilita el control del factor de elevación global. El valor predeterminado se establece en 1, lo que significa que todas las sombras de los componentes serán las mismas que se definen en los temas de sus componentes. Si desea eliminar todas las sombras, sólo necesita cambiar el valor de la propiedad a 0:
:root {
--ig-elevation-factor: 0;
}
El--ig-elevation-factor también se puede establecer en un valor decimal o un valor mayor que 1. Cuanto mayor sea el valor, más grande será la sombra.
API References
Elevations