+++ date = "2017-04-10T16:41:34+01:00" draft = false weight = 90 description = "Versatile and refined messages, ideal for daily use" title = "Messages" bref = "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!" toc = true +++
Usage
<div class="message" data-component="message"> ... <span class="close small"></span></div>
<div class="message error" data-component="message"> ... <span class="close small"></span></div>
<div class="message success" data-component="message"> ... <span class="close small"></span></div>
<div class="message warning" data-component="message">
<h5>...</h5>
...
<span class="close small"></span>
</div>
<div class="message focus" data-component="message"> ... <span class="close small"></span></div>
<div class="message black" data-component="message"> ... <span class="close small"></span></div>
<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
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
})