Author: | neulandagentur |
---|---|
Views Total: | 287 views |
Official Page: | Go to website |
Last Update: | November 5, 2019 |
License: | MIT |
Preview:

Description:
A lightweight & animated notification UI component that displays a Sticky or Temporary (toast-like) notification boxes sliding from the top of the screen.
How to use it:
Install, download, and import the ui-notification component.
# NPM $ npm install ui-notification --save
// es6 import { init as UiNotifcationInit } from 'ui-notification';
<!-- For Browser --> <script src="js/dist/ui-notification.js"></script>
Create a basic sliding notification and define the title & sub title as follow:
UiNotifcation.init( 'Title', 'Notification Message Here' );
Add a background overlay to the notification box. Default: false.
UiNotifcation.init( 'Title', 'Notification Message Here', { shadow: true } );
Determine if the notification box is dismissable. Default: true.
UiNotifcation.init( 'Title', 'Notification Message Here', { closable: false } );
Auto dismiss the notification box after a timeout.
UiNotifcation.init( 'Title', 'Notification Message Here', { duration: 3000 } );
Set the root element. Default: ‘body’.
UiNotifcation.init( 'Title', 'Notification Message Here', { root: document.querySelector('body') } );
Event handlers.
UiNotifcation.init( 'Title', 'Notification Message Here', { afterRender: function(_this, template) { setTimeout(() => { template.classList.add('is-active'); }, 10) }, beforeDestroy: function(_this, template) { if (!template.classList.contains('is-active')) { return; } _this.options.shouldDestroy = false; template.classList.remove('is-active'); template.addEventListener('transitionend', () => { _this.options.shouldDestroy = true; _this.destroy(); }); } } );
The primary CSS/CSS3 styles for the notification box.
/******************* Global view *******************/ .js--notification .box { position: fixed; text-align: center; top: 0; left: 50%; background-color: white; z-index: 99999; -webkit-transform: translate(-50%, -110%); -ms-transform: translate(-50%, -110%); transform: translate(-50%, -110%); padding: 40px 140px; padding: 2.5rem 8.75rem; border-radius: 2px; border-radius: 0.125rem; -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0.1875rem 0.1875rem 0.375rem 0rem rgba(0, 0, 0, 0.25); -moz-box-shadow: 0.1875rem 0.1875rem 0.375rem 0rem rgba(0, 0, 0, 0.25); box-shadow: 0.1875rem 0.1875rem 0.375rem 0rem rgba(0, 0, 0, 0.25); -webkit-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; } .js--notification.is-active .box { -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .js--notification .title { font-size: 24px; font-size: 1.5rem; } .js--notification .subtitle { color: #00b0b9; font-size: 20px; font-size: 1.25rem; } .js--notification .button { background-color: #f50057; color: white; padding: 17px 112px; padding: 1.0625rem 7rem; margin-top: 40px; margin-top: 2.5rem; -moz-appearance: none; -webkit-appearance: none; appearance: none; border-color: #f50057; border-style: solid; border-radius: 2px; border-radius: 0.125rem; border-width: 1px; border-width: 0.0625rem; } .js--notification .shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } /* elements */ /******************* Global view *******************/ .nm-ui-notifications h2 { padding-top: 50px; padding-top: 3.125rem; padding-left: 50px; padding-left: 3.125rem; font-size: 30px; font-size: 1.875rem; } .nm-ui-notifications { height: 100vh; } .nm-ui-notifications .inner { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 1200px; width: 75rem; padding-left: 10px; padding-left: 0.625rem; padding-right: 10px; padding-right: 0.625rem; } .nm-ui-notifications .js--button { outline: 0; color: white; background-color: #00b0b9; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 10px; margin-left: 0.625rem; border-color: #00b0b9; border-style: solid; border-radius: 2px; border-radius: 0.125rem; border-width: 1px; border-width: 0.0625rem; padding-left: 10px; padding-left: 0.625rem; padding-right: 10px; padding-right: 0.625rem; height: 50px; height: 3.125rem; font-size: 16px; font-size: 1rem; line-height: 50px; line-height: 3.125rem; } .nm-ui-notifications .js--button:first-child { margin-left: 0; }