@dile/dile-app-drawer
Advanced tools
@dile/dile-app-drawer - npm Package Compare versions
Comparing version 3.0.0 to 3.0.2
| { | ||
| "name": "@dile/dile-app-drawer", | ||
| "version": "3.0.0", | ||
| "version": "3.0.2", | ||
| "description": "Webcomponent to create a animated menu similar to the material design navigation drawer component", | ||
@@ -33,6 +33,6 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@dile/dile-close-on-esc-pressed-mixin": "^2.0.0", | ||
| "@dile/dile-close-on-esc-pressed-mixin": "^2.0.2", | ||
| "lit": "^2.2.1" | ||
| }, | ||
| "gitHead": "d16d2269b51ad7eac884dad1ddb7806dac173da5" | ||
| "gitHead": "b404cf91b5ed5788d9ec6c1560299569accb7cce" | ||
| } |
@@ -5,61 +5,5 @@ # @dile/dile-app-drawer | ||
| ## Installation | ||
| ## Docs an demos | ||
| ```bash | ||
| npm i @dile/dile-app-drawer | ||
| ``` | ||
| ## Usage | ||
| Import the component. | ||
| ```javascript | ||
| import '@dile/dile-app-drawer/dile-app-drawer.js'; | ||
| ``` | ||
| Use the component. | ||
| ```html | ||
| <dile-app-drawer> | ||
| <p><a href="#">Link 1</a></p> | ||
| <p><a href="#">Another link</a></p> | ||
| <p><a href="#">More information</a></p> | ||
| <p><a href="#">Contact us</a></p> | ||
| </dile-app-drawer> | ||
| ``` | ||
| ## Properties | ||
| This componen has two properties: | ||
| - **opened**: Set the state of the component between opened and closed. Boolean property. | ||
| - **direction**: Defines de animation and direction to open the menú. String property one of "top" or "left". Default is "top". | ||
| ## 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-closed**: Dispatched when the interface closes by any reason. | ||
| - **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 (or 100vh on "letf" direction) | ||
| --dile-app-drawer-content-width | Width of the menu | 100vw (or auto on "left" direction) | ||
| --dile-app-drawer-background-color | Background color menu layer | #ddd | ||
| --dile-app-drawer-z-index | z-index menu layer | 10001 | ||
| --dile-app-drawer-closed-top | Drawer content top position in closed state | -100vh (or 0 on "left" direction) | ||
| --dile-app-drawer-closed-left | Drawer content left position in closed state | 0 (or -100vw on "left" direction) | ||
| --dile-app-drawer-box-shadow | Menu shadow | 0 1px 8px #000 (or 1px 0 8px #000 on "left" direction) | ||
| --dile-app-drawer-modal-background-color | Menu modal layer background color | rgba(20, 20, 20, 0.7) | ||
| --dile-app-drawer-modal-z-index | Menu modal layer z-index | 10000 | ||
| - [GitHub readme docs](https://github.com/Polydile/dile-components/blob/master/site/pages/components/dile-app-drawer.rocket.md) | ||
| - [Docs and demos on the dile-components site](https://dile-components.polydile.com/components/dile-app-drawer/) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-22.73%
6344
- Number of lines in readme file
- decreased by-87.5%
8