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 Diseño de Materiales 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 de nivel de elevación. Cuanto mayor sea el número 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 3box-shadows. Estosbox-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 puedes ver en laCSS Variable columna, todas las elevaciones están definidas en el siguiente formato--ig-elevation-[level]. Como se ha mencionado, el número 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

    Actualizar las elevaciones predeterminadas funciona de forma similar a cómo se actualizan los colores de la paleta. Simplemente necesitas reasignar la variable a otro valor. Con las elevaciones, asegúrate de que el valor sea abox-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--resting-shadow botón en el contenido y la carta, y el--grid-shadow en la cuadrícula, al 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.