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

    Las sombras en Ignite UI for Angular siguen de cerca las directrices de Material Design para establecer una jerarquía de profundidad basada en 25 niveles de elevación. El tamaño del proyectado de sombra está relacionado con el número de nivel de elevación. Cuanto mayor sea el número de nivel de elevación, mayor será la sombra. Las elevaciones en Ignite UI for Angular se exponen como variables CSS. Cada variable almacena un conjunto de 3 box-shadows. Estos box-shadows representan los elementos umbra, penumbra y antumbra que son las propiedades de las sombras tal como se observan en el mundo real.

    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

    Como puede ver en la columna CSS Variable, todas las elevaciones se definen en el siguiente formato--ig-elevation-[level]. Como se mencionó, el número del nivel de elevación va de 0 a 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);
}
css

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

    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

    La actualización de las elevaciones predeterminadas funciona de manera similar a cómo se actualizan los colores de la paleta. Simplemente necesitas reasignar la variable a un valor diferente. Con elevaciones, asegúrese de que el valor sea un 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);
}
css

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

    Esto establecerá el en el botón y la tarjeta contenidos, y el en la cuadrícula, en el--resting-shadow​--grid-shadow valor asignado a--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.