te-drawer
v0.1.0
Published
Drawer web component
Downloads
5
Maintainers
Readme
te-drawer
Drawer web component
Install
npm i -S te-drawer
Usage
<te-drawer>Drawer content</te-drawer>
Attributes
| Attribute | Type | Description |
|---|---|---|
| visible | boolean
| Indication if drawer visible or not. |
Methods
| Method | Description |
|---|---|
| show()
| Slide-in drawer. |
| hide()
| Slide-out drawer. |
| toggle()
| Slide-in/out drawer. |
CSS Variables
| Var | Description | Default |
|---|---|---|
| --te-drawer-overlay-color | background-color
of the overlay element behind the drawer, covering the rest of the page. | rgba(0,0,0,.5)
|
| --te-drawer-background | background
value of the drawer itself. | white
|
| --te-drawer-max-width | max-width
of the drawer. (min-width
is set to 320px
) | 360px
|
| --te-drawer-shadow | box-shadow
value of the drawer. | none
|
Disclaimer
To fix the background and make it not scrollable this element appends/removes style properties to the body element of the document.
License
GPL-2.0 © Willi Eßer