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
})