Elevaciones
Las elevaciones 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. Puede crear conjuntos de elevaciones utilizando nuestra biblioteca de temas Sass.
Descripción general
Las elevaciones en Ignite UI for Angular se declaran como un mapa de 25 elementos. Cada elemento es un par clave-valor donde la clave es el nombre del nivel de elevación (0..24) y el valor es una lista de 3box-shadow declaraciones. Te permitimos generar nuevos conjuntos de elevaciones donde puedes definir el color de las sombras. Además, exponemos funciones para recuperar un nivel de elevación específico del mapa de elevaciones. Exponemos una variable$elevations global que se utiliza por defecto entre los componentes. Si no has leído la documentación de variables CSS relacionada con Elevations, te sugerimos que lo hagas primero antes de seguir leyendo.
Usage
La siguiente sección muestra cómo crear y recuperar elevaciones personalizadas.
Configuring Elevations
Para cambiar los colores utilizados por los ajustes preestablecidos de elevación predeterminados, debe configurar el módulo de ajustes preestablecidos de elevaciones.
// Define the 3 elevation colors
@use 'igniteui-theming/sass/elevations/presets' as * with(
$color-1: rgb(153, 191, 170), // Umbra
$color-2: rgb(92, 134, 141), // Penumbra
$color-3: rgb(92, 61, 70) // Ambient
);
@include elevations($material-elevations);
Retrieving Elevations
Para obtener un conjunto de sombras de caja del mapa de elevaciones puedes pasar hasta dos argumentos a laelevation función: un mapa de elevación y el nivel de elevación deseado. Devuelve una lista de 3 sombras de caja para el nivel dado.
Si quieres recuperar la elevación del mapa por defecto$elevations, puedes omitir el primer argumento.
// Returns elevation 1 shadows
$elevation-1: elevation(1);
// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
Passing Elevations to Themes
Varias mezclas temáticas te permiten pasar un mapa de elevaciones. Lo más notable es que tienetheme un parámetro llamado$elevations que permite actualizar las elevaciones de todos los temas componentes.
Fuerza que todos los temas de componentes utilicen tus elevaciones personalizadas:
@include theme(
//...
$elevations: $my-elevations
);
Además de esto, puedes decirle al tema que ignore/no use elevaciones por completo:
@include theme(
//...
$elevations: $my-elevations,
$elevation: false // disables all elevations
);
Como laelevation función devuelve una lista de sombras de cajas, puedes usar el valor de retorno de esa función para modificar solo ciertas elevaciones en tus temas componentes.
$card-theme: card-theme(
$resting-shadow: elevation(10)
);
@include css-vars($card-theme);
También puedes pasar sombras de caja simples sin aprovechar laelevation función:
$card-theme: card-theme(
$resting-shadow: 0 10px 10px 10px #666
);
.my-card {
@include css-vars($card-theme);
}
Custom Elevations
Es posible crear un mapa de elevaciones que no cumpla con las Directrices de Diseño de Materiales generadas por laelevations función. Asegúrate de que tus mapas personalizados de elevación contengan al menos 25 niveles de elevación. Aquí está la firma del mapa de elevaciones que nuestros temas esperan construir correctamente:
// Omitted levels 2 through 23 for brevity
$elevations: (
0: box-shadow(...),
1: box-shadow(...),
...
24: box-shadow(...)
);
Elevation Schema Declarations
Los niveles de elevación también se utilizan en declaraciones de esquemas temáticos. Más sobre eso en la sección Esquema de la documentación.
API References
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub