At this time, the @react-md/elevation
package is a bit different than the
other packages since it only exports utility functions and does not generate
any styles or expose any React components.
The main export of this package is the rmd-elevation
mixin which will allow
you to add box-shadow to any element from any of the 24 available material
design elevation heights. The example below will show all the different
elevations, so you can pick and choose what is needed for your component. I
would recommend toggling the light and dark theme of this app as well to show
how the elevation looks depending on background color.
This package is used internally for many of the other packages that create "temporary" material such as menus and sheets.
Note: If the dark theme is enabled for the documentation site, this demo is a great example of the "raising dark mode elevation" feature that can be enabled by setting
$rmd-theme-dark-elevation: true;
.
@include rmd-elevation(0)
@include rmd-elevation(1)
@include rmd-elevation(2)
@include rmd-elevation(3)
@include rmd-elevation(4)
@include rmd-elevation(5)
@include rmd-elevation(6)
@include rmd-elevation(7)
@include rmd-elevation(8)
@include rmd-elevation(9)
@include rmd-elevation(10)
@include rmd-elevation(11)
@include rmd-elevation(12)
@include rmd-elevation(13)
@include rmd-elevation(14)
@include rmd-elevation(15)
@include rmd-elevation(16)
@include rmd-elevation(17)
@include rmd-elevation(18)
@include rmd-elevation(19)
@include rmd-elevation(20)
@include rmd-elevation(21)
@include rmd-elevation(22)
@include rmd-elevation(23)
@include rmd-elevation(24)
This package also exports an additional mixins that might be useful:
rmd-elevation-transition
The rmd-elevation-transition
mixin is just a wrapper for the
rmd-transition-shadow-transition
mixin that only works with different
elevations. You'll primarily want to use this mixin unless you want to merge box
shadow values together.