@material/elevation
Advanced tools
Material Components for the web mixins + CSS Classes for Material Design elevation
Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 0 to 24.
A note about "z-space": Within the spec, elevation is normally referred to as having a
dpvalue. In other words, how many "pixels" above the base material is a piece of material elevated. On a computer, this is normally represented by a 3-d coordinate system. We likez-space(or just "z" for short) because it aligns with the technical definition of, and nomenclature for, a 3-d coordinate system. Therefore, we feel it makes more sense thandp. However, when we refer toz-space(orz), that can be used interchangeably with the spec'sdp.
npm install @material/elevation
Elevation is often already included within the baseline styles of other components (e.g. raised buttons, elevated cards).
However, you can also apply elevation to specific components using mdc-elevation--z<N> classes:
<div class="mdc-elevation--z1">
<!-- ... content ... -->
</div>
The elevation overlay should appear above the component container in the stacking context but below the ripple. To accomplish this, the .mdc-elevation-overlay element should appear before the .mdc-<component>__ripple element in the DOM context. Here's sample markup for a button with a touch target.
<button class="mdc-button mdc-button--raised">
<div class="mdc-elevation-overlay"></div>
<div class="mdc-button__ripple"></div>
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
<span class="mdc-button__label">Font Icon</span>
</button>
This ensures the ripple parts are rendered above the overlay.
@use "@material/elevation/mdc-elevation";
Some components have a set elevation. For example, a raised MDC Button has elevation 2.
If you want to set the elevation of an element, which is not a Material Design component, you can apply the following CSS classes.
| CSS Class | Description |
|---|---|
mdc-elevation--z<N> | Sets the elevation to the (N)dp, where 1 <= N <= 24 |
mdc-elevation-transition | Applies the correct css rules to transition an element between elevations |
| Mixin | Description |
|---|---|
elevation($z-value, $color, $opacity-boost) | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow |
overlay-common | Called once per application to setup the universal elevation overlay styles |
shadow($box-shadow) | Sets the box-shadow of the closest parent selector |
overlay-surface-position | Sets the positioning of the overlay's surface element so that the overlay can be appropriately centered |
overlay-dimensions($width, $height: $width, $has-content-sizing: true) | Sets the dimensions of the elevation overlay |
overlay-fill-color($color) | Sets the color of the elevation overlay |
overlay-opacity($opacity) | Sets the opacity of the elevation overlay |
| Function | Description |
|---|---|
transition-value($duration, $easing) | Returns a value for the transition property to transition an element between elevations |
overlay-transition-value($duration, $easing) | Returns a value for the transition property to transition the elevation overlay between elevations |
elevation-box-shadow($z-value, $color, $opacity-boost) | Returns the box-shadow for the elevation z-space for that given elevation z-value, and optionally sets the color and/or boosts the opacity of the shadow |
| Variable | Description |
|---|---|
$property | Default property for elevation transitions |
$transition-duration | Default duration value for elevation transitions |
$transition-timing-function | Default easing value for elevation transitions |
$overlay-color | Default color for the elevation overlay |
$overlay-property | Default property for the elevation overlay transitions |
If you need more configurability over your transitions, use the transition-value function in conjunction with the exported sass variables.
Custom Property | Default value | Description
--- | ---
--mdc-elevation-overlay-opacity | 0 | The opacity of the elevation overlay.
--mdc-elevation-overlay-fill-color | #fff | The color of the elevation overlay
If you need more configurability over your transitions, use the transition-value function in conjunction with the exported sass variables.
@use "@material/elevation";
.my-component-with-custom-transitions {
transition:
elevation.transition-value(),
/* Configure opacity to use same duration and easing values as elevation */
opacity elevation.$transition-duration elevation.$transition-timing-function;
opacity: .7;
will-change: elevation.$property, opacity;
}
12.0.0 (2021-07-27)
return statement into MDCTooltipComponent#isShown method. (4d95812)mdc-card__ripple element rather than the mdc-card__primary-action. (8ace3b8)#close within #destroy. (5631828)forceUpdate option to #setSelectedIndex that forces a UI update of the selected item. (5d06051)transform-origin for tooltips with caret so that the entrance animation originates from the caret. (1a8d064)tranform-origin. (25751d2)data-hide-tooltip-from-screenreader="true" (in addition to using data-tooltip-id rather than aria-describedby.PiperOrigin-RevId: 386490861
window.mdc.circularProgress to window.mdc['circular-progress].PiperOrigin-RevId: 384568221
mdc-icon-button__ripple. See README for details.PiperOrigin-RevId: 372153409
FAQs
Material Components for the web mixins + CSS Classes for Material Design elevation
The npm package @material/elevation receives a total of 516,969 weekly downloads. As such, @material/elevation popularity was classified as popular.
We found that @material/elevation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.