Elevations
Elevations are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation. The implementation of the Elevations in Ignite UI for Angular is modeled after the Elevations in Material Design.
Overview
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.
Here's a list of resting elevations as used in various components in Ignite UI for Angular in the Material Theme and their corresponding CSS variable names:
Component | Default Elevation Level | CSS Variable |
---|---|---|
banner, button, toast | 0 | --ig-elevation-0 |
badge, carousel buttons, search input | 1 | --ig-elevation-1 |
button group, contained button, card, grid, switch | 2 | --ig-elevation-2 |
navbar, snackbar | 4 | --ig-elevation-4 |
floating action button, | 6 | --ig-elevation-6 |
bottom navigation, ghost chip, dropdown | 8 | --ig-elevation-8 |
navdrawer | 16 | --ig-elevation-16 |
dialog | 24 | --ig-elevation-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
To begin using elevations in your own components all you need is to reference the variable name of the desired level.
.floaty-element {
box-shadow: var(--ig-elevation-6);
}
Changing the elevation in an existing component theme works similarly.
[igxButton="contained"] {
--resting-shadow: var(--ig-elevation-4);
--hover-shadow: var(--ig-elevation-12);
--focus-shadow: var(--ig-elevation-12);
}
The documentation for each component theme lists the default elevation used in each of its states. If elevation is not listed, the component doesn't use any of the predefined elevation levels.
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
.
Example:
/* 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);
}
Now, all components that use elevation levels 1 and 2 will have their shadows updated.
Shadowing
You can shadow the globally set elevations for a specific scope only. We already saw that the button component uses elevation level 2 for its resting state. Level 2 is also used by the card and grid components. So to change the shadows for all three, all you need to do is:
[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
;
Elevations can be created and consumed in a more powerful way using Sass as well. Check out the related topics below to learn more.
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.