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.

You can use data- attributes for all of the JavaScript options instead, but you will need a click event handler on the element added via JavaScript. View the page source at the bottom to see how it is done on this page.


Usage

Notify provides a simple API which you can reuse in your application code. The following JavaScript code snippet gets you started.

JavaScript

FatKit.notify({
	message : 'Bazinga!',
	status  : 'info',
	timeout : 5000,
	pos     : 'top-center'
});


// Shortcuts
FatKit.notify('My message');
FatKit.notify('My message', status);
FatKit.notify('My message', { /* options */ });

Example

FatKit.notify("Message...");

HTML message

You can use HTML inside your notification message, like an icon from the Icon component.

Example

FatKit.notify("<i class='material-icons'>check</i> Message with an icon...");
// Or
<button class="f-btn" data-message="<i class='material-icons'>check</i> Message with an icon..."></button>

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

FatKit.notify("Message...", { timeout : 0 });
// Or
<button class="f-btn" data-message="Sticky message..." data-timeout="0">Sticky</button>

Positions

Add one of the following parameters to adjust the notification's position to different corners.

Parameter Code Example
top-center
FatKit.notify("...", { pos : 'top-center' })
top-left
FatKit.notify("...", { pos : 'top-left' })
top-right
FatKit.notify("...", { pos : 'top-right' })
bottom-center
FatKit.notify("...", { pos : 'bottom-center' })
bottom-left
FatKit.notify("...", { pos : 'bottom-left' })
bottom-right
FatKit.notify("...", { pos : '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
FatKit.notify("...", { status : 'info' })
success
FatKit.notify("...", {status:'success'})
warning
FatKit.notify("...", {status:'warning'})
danger
FatKit.notify("...", {status:'danger'})