0.1.0 • Published 6 years ago
te-drawer v0.1.0
te-drawer
Drawer web component
Install
npm i -S te-drawerUsage
<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
0.1.0
6 years ago