Messages

Messages are an essential part of modern web, and they can provide invaluable feedback to the users. Messages in Kube look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an message class, add a color using meaningful classes like error or success and you're practically done!.

Usage

You have 2 modules waiting to installation. Install 
<div class="message" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message error" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message success" data-component="message"> ...  <span class="close small"></span></div>
Warning!
You have 2 modules waiting to installation. Install 
<div class="message warning" data-component="message">
    <h5>...</h5>
    ...
    <span class="close small"></span>
</div>
You have 2 modules waiting to installation. Install 
<div class="message focus" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message black" data-component="message"> ...  <span class="close small"></span></div>
You have 2 modules waiting to installation. Install 
<div class="message inverted" data-component="message"> ...  <span class="close small"></span></div>

Options

Name Type Default
closeSelector string .close
closeEvent string click
animationOpen string fadeIn
animationClose string fadeOut

Set an option

Via data attribute:

<div class="message" data-component="message" data-close-selector=".my-custom-close">
    ... <span class="my-custom-close small"></span>
</div>

Via Javascript:

$('#my-message').message({
    closeSelector: '.my-custom-close'
});

Methods

You have 2 modules waiting to installation. Install
Method Description
close Manually closes a message.
open Opens a message if it has been closed.

Example

$('#my-message').message('close');

Callbacks

Callback Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the message has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the message has been closed, will wait for CSS animation to complete.

Example

$('#my-message').on('closed.message', function()
{
    // do something
})