1.1.0 • Published 1 year ago
banner-alert-js v1.1.0
Banner-Alert-js
Offers methods for posting UI alerts.
Table of contents
- Installation
- Examples
- Public Methods
- BannerAlert - Class
- .transmit()
- BannerAlert - Class
Installation
You can use NPM to download package into your project
npm install banner-alert-js
OR you can import the module directly in your project with ES6 Modules
<script type="module">
import { BannerAlert } from './banner-alert-js/banner-alert.js';
</script>
Basic Usage
See '/demo/basic-usage.html' in repo for complete example
HTML
<div class="banner-alerts"></div>
<button onclick="window.triggerExampleAlerts();">Trigger Alert</button>
JavaScript
<script type="module">
// ES6 Module Import
import { BannerAlert } from '/banner-alert-js/banner-alert.js';
window.triggerExampleAlerts = function() {
let messageType = 'success'; // Can be any value
let message = 'This is a success alert';
let messageTtl = 3000; // Measured in seconds
let parentContainer = document.querySelector( '.banner-alerts' ); // This container can be anywhere in the document
let customClassList = [ 'foo', 'bar', 'baz' ];
BannerAlert.transmit(
messageType,
message,
parentContainer,
messageTtl,
customClassList
);
}
</script>
Public Methods
Object | Method | Description |
---|---|---|
BannerAlert | transmit | Transmit receives five arguments: - Alert Type; Expected value used to set data-message-type attribute on new HTML banner element. Can be used to style the alert. - Message; Expected value string, used to populate innerHTML of new HTML banner element - Parent Container Denotes where to append the alert element - TTL; Expected value number, used to determine the duration of alert visibility - Custom Class List; Expected value array of class names, adds classes to banner element |