https://github.com/polydile/dile-app-drawer
Web component to create a app drawer menu, based on LitElement.
https://github.com/polydile/dile-app-drawer
Last synced: over 1 year ago
JSON representation
Web component to create a app drawer menu, based on LitElement.
- Host: GitHub
- URL: https://github.com/polydile/dile-app-drawer
- Owner: Polydile
- License: mit
- Created: 2019-07-19T14:43:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T04:58:06.000Z (over 3 years ago)
- Last Synced: 2024-03-29T01:23:33.947Z (about 2 years ago)
- Language: JavaScript
- Homepage: https://dile-app-drawer.polydile.com/
- Size: 2.44 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved!
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# \
Web component to create a simple animated menu, useful as app global menu. Based on LitElement
Go to [DEMOS page](https://dile-app-drawer.polydile.com/).
## Installation
```bash
npm i dile-app-drawer
```
## Usage
```html
import 'dile-app-drawer/dile-app-drawer.js';
```
## Properties
This componen only has one property to set the state of the component between opened and closed.
- **opened**: Boolean property.
## Methods
The component also provides a set of useful methods to controls the component state programmatically.
- **open()**: Opens the menu.
- **close()**: Closes the menu.
- **toggle()**: Changes the state, from open to close or close to open.
## Events
- **dile-app-drawer-click-outside**: This custom event is dispatched when the drawer panel is closed because a user click outside the menu layer.
## CSS customization
There are some CSS custom properties to customize the style and the animation.
Custom property | Description | Default
----------------|-------------|---------
--dile-app-drawer-content-height | Height of the menu | auto
--dile-app-drawer-background-color | Background color menu layer | #ddd
--dile-app-drawer-z-index | z-index menu layer | 10000
--dile-app-drawer-closed-top | Drawer content top position in closed state | 40vh
--dile-app-drawer-closed-left | Drawer content left position in closed state | 0