@dreamworld/dw-surface NPM

dw-surface

Usage

There are 2 different ways to use it:

Extend DWSurface and specify _contentTemplate(). (Most used case)
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.

lit checkbox

@dreamworld/dw-ripple @dreamworld/material-styles @dreamworld/pwa-helpers

@infinitebrahmanuniverse/nolb-_dre @everything-registry/sub-chunk-256

2.2.4

21 days ago

2.2.4-update-interactive-style.2

21 days ago

2.2.4-update-interactive-style.1

21 days ago

2.2.3

22 days ago

2.2.3-update-activated-style.1