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 Elevations en Ignite UI for Angular se basa en Elevations in Material Design.

    Descripción general

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

    Aquí hay una lista de elevaciones en reposo utilizadas 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);
}

    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

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

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

    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.