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 declaraciones box-shadow. 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 global $elevations que se utiliza en todos los componentes de forma predeterminada. Si no ha leído la documentación de variables CSS relacionada con Elevaciones, le sugerimos que lo haga 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 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);

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

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

    Algunos temas de componentes también aceptan el parámetro $elevations para permitirle pasar una elevación personalizada solo para sus instancias.

    Por ejemplo, el componente de tarjeta admite el paso de elevaciones personalizadas. Para saber qué componentes aceptan un mapa de elevaciones personalizado, consulte su documentación de Sass. Cada componente utiliza solo niveles específicos del mapa de elevaciones, esos también se enumeran en los documentos Sass del componente.

    @include card(card-theme(
    //...
    $elevations: $my-elevations,
));

    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 card($card-theme);

    Esto se compila a:

    .igx-card {
  box-shadow: 
    0 6px 6px -3px rgba(0, 0, 0, 0.26),
    0 10px 14px 1px rgba(0, 0, 0, 0.12),
    0 4px 18px 3px rgba(0, 0, 0, 0.08);
}

    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 card($card-theme);
}

    Aquí está el resultado del fragmento anterior:

    .my-card .igx-card {
  /* ... */
  box-shadow: 0 10px 10px 10px #666;
}

    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(...)
);

    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.