14.0.0 • Published 4 months ago

@material/elevation v14.0.0

Weekly downloads
89,769
License
MIT
Repository
github
Last release
4 months ago

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 dp value. 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 like z-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 than dp. However, when we refer to z-space (or z), that can be used interchangeably with the spec's dp.

Design & API Documentation

Installation

npm install @material/elevation

Usage

CSS Classes

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 ClassDescription
mdc-elevation--z<N>Sets the elevation to the (N)dp, where 1 <= N <= 24
mdc-elevation-transitionApplies the correct css rules to transition an element between elevations

Sass Mixins, Variables, and Functions

MixinDescription
mdc-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
FunctionDescription
mdc-elevation-transition-value($duration, $easing)Returns a value for the transition property to transition an element between elevations
VariableDescription
mdc-elevation-propertyDefault property for elevation transitions
mdc-elevation-transition-durationDefault duration value for elevation transitions
mdc-elevation-transition-timing-functionDefault easing value for elevation transitions

If you need more configurability over your transitions, use the mdc-elevation-transition-value function in conjunction with the exported sass variables.

.my-component-with-custom-transitions {

  transition:
    mdc-elevation-transition-value(),
    /* Configure opacity to use same duration and easing values as elevation */
    opacity $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function;
  opacity: .7;
  will-change: $mdc-elevation-property, opacity;
}
@material/icon-button@material/drawer@material/dialog@material/fab@material/data-table@material/button@material/card@material/chips@material/banner@material/menu@material/menu-surface@material/select@material/top-app-bar@material/tooltip@material/slider@material/snackbar@material/switch@material/tab@material/tab-bar@material/segmented-buttonjuan-demo-appriot-templatepwa-test-hpwa-test1pwa-test2sot-incubator@beezydev/elevationopenstamanagermaterial-components-web@everything-registry/sub-chunk-584nang-mdc-testngx-dsomaterial-toolboxmdc-range-slidermdc-react-gumballmde-ultimatemdsc-navigationember-cli-mdc-elevationember-material-componentsfm-plugin-select2gesdisc-componentspreact-material-componentspreact-material-components-mgrpp-buttonreact-mdcreact-mdcuireact-material-web-componentspitaya-framework@hako1912/material-mini@gmvdev/materials@emuanalytics/flow-rdf@infinitebrahmanuniverse/nolb-_mate@finastra/fds-themevue-material-design-components@mdcext/input-dialog@mdcext/multiselect@mcwv/elevation@mhamrah/svelte-material-ui@mirana/materializeuui-componentssvelte-arcadiatest-chipstest-rsmdcsariska-cobrowsingsariska-webappbw-material@detachhead/smui-button@detachhead/smui-extra-accordion@detachhead/smui-paper@lcap-ui/elevation@maicol07/mwa-card@maicol07/mwc-card@o-rango/orango-material-design@material/tokens@material/toolbar@materials-ui/core@materials-ui/site@materials-elements/core@materials-elements/site@pitaya-components/master-component@pitaya-components/accordion@pitaya-components/app@pitaya-components/elevation@preact-material-components/elevation@labstack/data-table@mycause/ui@shortcm/banner@openremote/or-panel@pmwcs/elevation@react-universal-dialogs/android@react-mdc/elevation@smui-extra/accordion@smui/button@smui/paper@rmwc/elevation@tutorbook/onboarding@tylertech/forge@angular/material@angular/material-experimentalaurelia-mdc-ui
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.41.0

5 years ago

0.40.1

5 years ago

0.40.0

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.38.0

6 years ago

0.36.1

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.28.0

6 years ago

0.25.0

6 years ago

0.1.13

6 years ago

0.1.12

7 years ago

0.1.11

7 years ago

0.1.10

7 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago