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. La implementación de las Elevaciones en Ignite UI for Angular se modela a partir de las Elevaciones en Material Design.

    Descripción general

    Shadows in Ignite UI for Angular closely follow the Material Design guidelines for establishing depth hierarchy based on 25 elevation levels. The size of the shadow cast is related to the elevation level number. The higher the elevation level number, the larger the shadow will be. Elevations in Ignite UI for Angular are exposed as CSS variables. Each variable stores a set of 3 box-shadows. These box-shadows represent the umbra, penumbra, and antumbra elements that are the properties of shadows as observed in the real world.

    A continuación, se muestra una lista de las elevaciones en reposo que se utilizan en varios componentes de Ignite UI for Angular en el tema Material y sus correspondientes nombres de variables CSS:

    Componente Nivel de elevación predeterminado Variables CSS
    pancarta, botón, brindis 0 --ig-elevación-0
    insignia, botones de carrusel, entrada de búsqueda 1 --ig-elevación-1
    grupo de botones, botón contenido, tarjeta, cuadrícula, interruptor 2 --ig-elevación-2
    barra de navegación, snackbar 4 --ig-elevación-4
    botón de acción flotante, 6 --ig-elevación-6
    navegación inferior, chip fantasma, menú desplegable 8 --ig-elevación-8
    cajón de navegación 16 --ig-elevación-16
    diálogo 24 --ig-elevación-24

    As you can see from the CSS Variable column, all elevations are defined in the following format --ig-elevation-[level]. As mentioned, the elevation level number go from 0 through 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.

    .floaty-element {
  box-shadow: var(--ig-elevation-6);
}

    Cambiar la elevación en un tema de componente existente funciona de manera similar.

    [igxButton="contained"] {
  --resting-shadow: var(--ig-elevation-4);
  --hover-shadow: var(--ig-elevation-12);
  --focus-shadow: var(--ig-elevation-12);
}

    La documentación para cada tema de componente enumera la elevación predeterminada utilizada en cada uno de sus estados. Si la elevación no aparece en la lista, el componente no utiliza ninguno de los niveles de elevación predefinidos.

    Defining Elevations

    Updating the default elevations works in a way similar to how palette colors are updated. You simply need to reassign the variable to a different value. With elevations, make sure the value is a box-shadow.

    Ejemplo:

    /* styles.css */
: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 del botón usa el nivel de elevación 2 para su estado de reposo. El nivel 2 también lo utilizan los componentes de tarjeta y cuadrícula. Entonces, para cambiar las sombras de los tres, todo lo que necesitas hacer es:

    [igxButton="contained"],
igx-grid,
igx-card {
    --ig-elevation-2: 0 3px 9px 0 rgba(0, 0, 0, .24);
}

    This will set the --resting-shadow in the contained button and card, and the --grid-shadow in the grid, to the value assigned to --ig-elevation-2;

    Las elevaciones también se pueden crear y consumir de una manera más poderosa usando Sass. Consulte los temas relacionados a continuación para obtener más información.

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.