Alert
Alert provide contextual feedback messages for typical user actions. A handful of flexible alert messages are available.
Example
NotificationLorem ipsum dolor sit amet, consectetur
adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="nj-alert nj-alert--primary" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
<div><span class="nj-alert__title">Notification</span>Lorem ipsum dolor sit amet, consectetur
adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
Theme colors
Be sure to use the appropriate icon for the type of your alert.
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
<div class="nj-alert nj-alert--primary" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
<div class="nj-alert nj-alert--success" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">check</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
<div class="nj-alert nj-alert--warning" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">warning</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
<div class="nj-alert nj-alert--danger" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">error</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
<div class="bg-blue-corporate px-3 py-1">
<div class="nj-alert nj-alert--light" role="alert">
<span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</div>
Dismissing
Note that closing an alert will remove it from the DOM. You can see this in action with a live demo:
NotificationLorem ipsum dolor sit amet, consectetur
adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="nj-alert nj-alert--primary" role="alert">
<button type="button" class="nj-close nj-alert__close" aria-label="Close">
<span aria-hidden="true" class="material-icons nj-alert__close-icon">close</span>
</button>
<span aria-hidden="true" class="material-icons nj-alert__icon">notification_important</span>
<div><span class="nj-alert__title">Notification</span>Lorem ipsum dolor sit amet, consectetur
adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
Methods
Method | Description |
---|---|
close |
Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. |
dispose |
Destroys an element’s alert. |
getInstance |
_ |
Static_ method which allows you to get the alert instance associated to a DOM element, you can use it like this: NJ.Alert.getInstance(alert) |
var alertNode = document.querySelector('.alert')
var alert = Alert.getInstance(alertNode)
alert.close()
Events
ENGIE’s alert component exposes a few events for hooking into alert functionality.
Event | Description |
---|---|
close.nj.alert |
This event fires immediately when the close instance method is called. |
closed.nj.alert |
This event is fired when the alert has been closed (will wait for CSS transitions to complete). |
document.querySelector('.my-alert').addEventListener('closed.nj.alert', () => {
// do something...
});
document.querySelector('.my-alert').addEventListener('close.nj.alert', () => {
// do something...
})