@dreamworld/dw-surface

dw-surface

Usage

There are 2 different ways to use it:

1. Extend DWSurface and specify _contentTemplate(). (Most used case)
2. Use dw-surface in local dom of any other element & provide it's content as light dom (slot). (Rare used case)

properties

Name	Type	Default	Description
bg	String	surface	In which color background should be rendered. Possible values: primary, secondary, error and surface.
elevation	Number	0	Drop-shadow changes based on this. In the dark-theme, the opacity of the background is changed on different elevations. Those can be configured through custom CSS properties.
transparent	Boolean	false	For a transparent background, set true elevation to 0.
interactive	Boolean	false	Set true to enable hover, focus and ripple effects.
selected	Boolean	false	Set to true to show the surface selected.
activated	Boolean	false	Set to true to display the surface in an activated state.

Custom CSS Properties

• --dw-surface-overlay-color
• --dw-surface-overlay-opacitiy-elevation-1
• --dw-surface-overlay-opacitiy-elevation-2
• --dw-surface-overlay-opacitiy-elevation-3
• --dw-surface-overlay-opacitiy-elevation-4
• --dw-surface-overlay-opacitiy-elevation-6
• --dw-surface-overlay-opacitiy-elevation-8
• --dw-surface-overlay-opacitiy-elevation-12
• --dw-surface-overlay-opacitiy-elevation-16
• --dw-surface-overlay-opacitiy-elevation-24

It's already been declrared with default values of material style in material-styles. So, In most cases you don't need to customize them unless you really intended to do so.