Alert
Alert provide contextual feedback messages for typical user actions. A handful of flexible alert messages are available.
Example
<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>Theme colors
Be sure to use the appropriate icon for the type of your 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>
<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>
<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>
<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>
<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>Dismissing
Note that closing an alert will remove it from the DOM. You can see this in action with a live demo:
<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>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...
})Usage
Alert is an information notification related to the user’s recent activity on the interface. It should be a title with an explanatory message (to warn the user about an error or to notify a successful action) that requests feedback from the user.
Best practices
Do / Don’t
In case of a comparison, order the bars in an ascending or descending order to provide more meaning to your charts.
test
In case of a comparison, order the bars in an ascending or descending order to provide more meaning to your charts.
test