https://github.com/polydile/dile-top-message
Web component to implement a message area located in the top of the page or an element, based on LitElement
https://github.com/polydile/dile-top-message
Last synced: over 1 year ago
JSON representation
Web component to implement a message area located in the top of the page or an element, based on LitElement
- Host: GitHub
- URL: https://github.com/polydile/dile-top-message
- Owner: Polydile
- License: mit
- Created: 2019-09-17T13:28:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T10:35:24.000Z (over 3 years ago)
- Last Synced: 2024-04-29T18:47:15.155Z (about 2 years ago)
- Language: JavaScript
- Size: 1.68 MB
- Stars: 2
- 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/dile-message](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained.
# \
Web Component to show a custom message to the user. This component display the message until the user clicks in the included close icon. There are some posible ways to set the message and open the message interface. Also there is an animation when the message opens and closes.
You may see different implementations running in the [demos page](https://dile-top-message.polydile.com).
This webcomponent is based on LitElement and follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i dile-top-message
```
## Usage
```html
import 'dile-top-message/dile-top-message.js';
Hi from Polydile!!
```
Also is posible to set the display message in the "message" property, and open the interface with the open() method.
```html
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('msgElement').open();
});
```
Another possibility is to simply call the openMessage() method, setting the message in the method parameter.
```html
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('msgElement').openMessage('Setting a message and opening the interface in one step');
});
```
## Properties
- **opened**: If true the feedbak box is in opened status.
- **message**: Message to display. Remember that, if message='' or undefined, then the component will display the content comming from the slot.
## Events
- **dile-top-message-closed-by-user**: This event is dispatched when the component closes by a user click on the close icon.
## Style customization
You can customize the message box interface by using the CSS custom properties bellow.
Custom property | Description | Default
----------------|-------------|---------
--dile-top-message-color | Message text and icon color | #fff
--dile-top-message-background-color | Message background color | #666
--dile-top-message-padding | Padding for the message box | 15px
--dile-top-message-icon-size | Close icon size | 20px