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

    Elevations in Ignite UI for Angular are declared as a map of 25 elements. Each element is a key-value pair where the key is the elevation level name (0..24) and the value is a list of 3 box-shadow declarations. We allow you to generate new sets of elevations where you can define the color for the shadows. Additionally, we expose functions for retrieving a specific elevation level from the elevations map. We expose a global variable $elevations that is used across components by default. If you've not read the CSS variables documentation related to Elevations, we suggest you do that first before reading on.

    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

    To retrieve a set of box-shadows from the elevations map you can pass up to two arguments to the elevation function - an elevation map and the wanted elevation level. It returns a list of 3 box shadows for the given level.

    If you want to retrieve the elevation from the default $elevations map, you can omit the first argument.

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

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

    Passing Elevations to Themes

    Several theme mixins allow you to pass an elevations map. Most notably, the theme has a parameter named $elevations which allows you to update the elevations for all component themes.

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

    Since the elevation function returns a list of box shadows, you can use the return value of that function to modify only certain elevations in your component themes.

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

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

    You can also pass simple box shadows without taking advantage of the elevation function:

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

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

    Custom Elevations

    It is possible to create an elevations map that doesn't adhere to the Material Design Guidelines as generated by the elevations function. Make sure your custom elevation maps contain at least 25 elevation levels. Here's the elevations map signature our themes expect to build correctly:

    // 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.