0.0.2 • Published 2 years ago
eit-info-overlay v0.0.2
\
This webcomponent follows the open-wc recommendation.
Installation
npm i eit-info-overlay
Usage
Import the component
import 'eit-info-overlay/eit-info-overlay.js';
Use the component
<eit-info-overlay>
Any info message. (this is the overlay content)
</eit-info-overlay>
Properties
- opened: Set the open or close state of the overlay.
- horizontalAlign: String property to set the horizontal position of the menu. Valid values are "left", "right" or "center". Default to "left".
- verticalAlign: String property to set the vertical position of the menu. Valid values are "bottom", "center" or "top". Default to "bottom".
- moveTop: Number of pixels to modify the default vertical position of the overlay. Accepts positive (move down) an negative (move up) values. Default 0.
- moveLeft: Number of pixels to modify the default horizontal position of the overlay. Accepts positive (move right) an negative (move left) values. Default 0.
Methods
- open(): Use it to open the menu overlay box
- close(): Use it to close the menu overlay box
- toggle(): Toggles the menu-overlay box
Custom events
- overlay-opened: dispatched when the overlay opens.
- overlay-closed: dispatched when the overlay closes.
CSS Custom Properties
You can customize it using CSS Custom Properties.
Custom property | Description | Default |
---|---|---|
--eit-info-overlay-color | Overlay text color | #303030 |
--eit-info-overlay-background-color | Overlay background color | #f5f5f5 |