Alert
Alert provide contextual feedback messages for typical user actions. A handful of flexible alert messages are available.
Example
notification_important
NotificationLorem ipsum dolor sit amet, consectetur adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<nj-alert>
<div class="nj-alert nj-alert--primary" role="alert">
<i class="material-icons nj-alert__icon">notification_important</i>
<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>
</nj-alert>
Use only the tag
<nj-alert></nj-alert>
if you choose the Web Component initialization method with Angular, React or VueJs frameworks.
Theme colors
Be sure to use the appropriate icon for the type of your alert.
notification_important
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
check
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
error
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
notification_important
Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.
<nj-alert>
<div class="nj-alert nj-alert--primary" role="alert">
<i class="material-icons nj-alert__icon">notification_important</i>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</nj-alert>
<nj-alert>
<div class="nj-alert nj-alert--success" role="alert">
<i class="material-icons nj-alert__icon">check</i>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</nj-alert>
<nj-alert>
<div class="nj-alert nj-alert--warning" role="alert">
<i class="material-icons nj-alert__icon">warning</i>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</nj-alert>
<nj-alert>
<div class="nj-alert nj-alert--danger" role="alert">
<i class="material-icons nj-alert__icon">error</i>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</nj-alert>
<nj-alert>
<div class="bg-blue-corporate px-3 py-1">
<div class="nj-alert nj-alert--light" role="alert">
<i class="material-icons nj-alert__icon">notification_important</i>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores.</div>
</div>
</div>
</nj-alert>
Dismissing
Note that closing an alert will remove it from the DOM. You can see this in action with a live demo:
notification_important
NotificationLorem ipsum dolor sit amet, consectetur adipisicing elit
asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<nj-alert>
<div class="nj-alert nj-alert--primary" role="alert">
<button type="button" class="nj-close nj-alert__close" aria-label="Close">
<i class="material-icons nj-alert__close-icon">close</i>
</button>
<i class="material-icons nj-alert__icon">notification_important</i>
<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>
</nj-alert>
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...
})