Notify system
Create notifies simple and easy with Metro UI.
About
The system of notifications is intended for informing users about the processes occurring on the site or in the application.
Metro UI contains object Metro.notify
to create notifies.
To create notify
execute method create
of Metro.notify
object.
The method create
has three parameters:
- message - notification message
- title - notification title
- options - notification options
<button class="button" onclick="showNotify();">Notify Me</button>
<script>
function showNotify(){
Metro.notify.create("This is a notify", "Title", {});
}
</script>
Setup system
For the notification system in Metro UI, a number of parameters are defined:
- container - where notifies showing (default: null)
- width - notifies width (default: 220px)
- timeout - timeout before the notify is close (default: 2000)
- duration - animation duration (default: 300)
- distance - distance where animation started (default: 100vh)
- animation - animation function (default: swing). See easing utilities
You can change this options with setup
method of Metro.notify
object.
The reset
method returns the default values.
<button class="button secondary" onclick="showSetupDemo()">Setup demo</button>
<script>
function showSetupDemo(){
var notify = Metro.notify;
notify.setup({
width: 300,
duration: 1000,
animation: 'easeOutBounce'
});
notify.create("This is a notify");
notify.reset();
}
</script>
Notify options
For each notify you can set own options:
- keepOpen - if
true
the notification will not be automatically closed, user must click on notify to close it. - cls - additional class(es) for the notification
- width - notification width
- onShow - function to be performed after the notification is showed
- onClose - function to be performed after the notification is closed
<button class="button info" onclick="showKeepOpenDemo()">Keep open demo</button>
<button class="button dark" onclick="showCallbackDemo()">Callback demo</button>
<script>
function showClassDemo(){
var notify = Metro.notify;
notify.create("This is a notify with additional class.", "Alert", {
cls: "alert"
});
}
function showKeepOpenDemo(){
var notify = Metro.notify;
notify.create("This is a notify. Click me to close", null, {
keepOpen: true
});
}
function showCallbackDemo(){
var notify = Metro.notify;
notify.create("This is a notify", null, {
onClose: function(){
alert('Hi from notification callback');
}
});
}
</script>