Notify
Create toggleable notifications that fade out automatically.
The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it.
Usage
Notify provides a simple API which you can reuse in your application code. The following JavaScript code snippet gets you started.
JavaScript
UIkit.notify({
message : 'Bazinga!',
status : 'info',
timeout : 5000,
pos : 'top-center'
});
// Shortcuts
UIkit.notify('My message');
UIkit.notify('My message', status);
UIkit.notify('My message', { /* options */ });Example
UIkit.notify("Message...");HTML message
You can use HTML inside your notification message, like an icon from the Icon component.
Example
UIkit.notify("<i class='uk-icon-check'></i> Message with an icon...");Delay and sticky
You can define via timeout for what amount of time in milliseconds a message is visible. You can also create a sticky message by setting the timeout to zero.
Example
UIkit.notify("Message...", {timeout: 0});Positions
Add one of the following parameters to adjust the notification's position to different corners.
| Parameter | Code | Example |
|---|---|---|
top-center |
|
|
top-left |
|
|
top-right |
|
|
bottom-center |
|
|
bottom-left |
|
|
bottom-right |
|
Status
A notification can be styled by adding a status to the message to indicate an info, success, warning or a danger status.
| Status | Code | Example |
|---|---|---|
info |
|
|
success |
|
|
warning |
|
|
danger |
|
