@malomohq/suede-elevation

Demo - Shadow

Getting Started

npm install @malomohq/suede-elevation

# or

yarn install @malomohq/suede-elevation

Usage

Shadow

The Shadow component will apply a drop shadow to any React component. You can modify the effect of the shadow using the distance prop.

import { Shadow } from '@malomohq/suede-elevation';

function Example() {
  return (
    <Shadow distance={ 1 }>
      <div>Hello, world!</div>
    </Shadow>
  );
}

Details

• Element type - none
• Component type - Comprehensive
• Allows root override - No

Props

• children (element | required) - A single React element of any type.
• distance (number | required) - The distance from the front of one material to the front of the next measured on the z-axis. May be a value between 0 and 24.

Scrim

The Scrim component applies an opaque background to it's relative parent.

import { Scrim } from '@malomohq/suede-elevation';

function Example() {
  return (
    <div>
      <Dialog>Hello, world!</Dialog>
      <Scrim show />
    </div>
  );
}

Details

• Element type - div
• Component type - Structural
• Allows root override - Yes

Props

• show (boolean) - Whether to display the scrim or not.

Additional Notes

The z-index for this component is set to a value of 1000. If you would like to place an element above or below the scrim you will need to apply a z-index to that element accordingly.

See Also

• Suede Button

Further Reading

• Material Design - Elevation