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 3 box-shadow declaraciones. Te permitimos generar nuevos conjuntos de elevaciones donde puedes definir el color para 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 en todos los componentes de forma predeterminada. Si no has leído la documentación de variables CSS relacionada con las elevaciones, 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);
scss

Retrieving Elevations

Para recuperar un conjunto de sombras de cuadro del mapa de elevaciones, puede pasar hasta dos argumentos a la función elevation: un mapa de elevación y el nivel de elevación deseado. Devuelve una lista de 3 sombras de cuadro para el nivel dado.

Si desea recuperar la elevación del mapa predeterminado $elevations, puede omitir el primer argumento.

// Returns elevation 1 shadows
$elevation-1: elevation(1);

// Returns elevation 1 shadows
$my-elevation-1: elevation($name: 1);
scss

Passing Elevations to Themes

Varios mixins de temas le permiten pasar un mapa de elevaciones. En particular, el theme tiene un parámetro llamado $elevations que le 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
);
scss

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

Dado que la función elevation devuelve una lista de sombras de cuadros, puede usar el valor de retorno de esa función para modificar solo ciertas elevaciones en los temas de sus componentes.

$card-theme: card-theme(
    $resting-shadow: elevation(10)
);

@include css-vars($card-theme);
scss

También puedes pasar sombras de cuadros simples sin aprovechar la función elevation:

$card-theme: card-theme(
    $resting-shadow: 0 10px 10px 10px #666
);

.my-card {
  @include css-vars($card-theme);
}
scss

Custom Elevations

Es posible crear un mapa de elevaciones que no cumpla con las Pautas de diseño de materiales generadas por la función elevations. Asegúrese de que sus mapas de elevación personalizados 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(...)
);
scss

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.