exampleSite/content/blog/content/blog/content/blog/messages.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

+++
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 messages in Kube look nice"
+++

<h3 class="section-head" id="h-usage"><a href="#h-usage">Usage</a></h3>
<div class="example">
  <div class="message open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<div class="example">
  <div class="message error open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message error"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<div class="example">
  <div class="message success open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message success"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<div class="example">
  <div class="message warning open" data-component="message" data-loaded="true">
    <h5>Warning!</h5>You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span>
  </div>
  <pre class="code skip"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"message warning"</span> <span class="hljs-attr">data-component</span>=<span class="hljs-string">"message"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    ...
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close small"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</pre>
</div>
<div class="example">
  <div class="message focus open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message focus"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<div class="example">
  <div class="message black open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small white"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message black"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<div class="example">
  <div class="message inverted open" data-component="message" data-loaded="true">
    You have 2 modules waiting to installation. <a href="">Install</a> <span class="close small"></span>
  </div>
  <pre class="code">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"message inverted"</span> data-component=<span class="hljs-string">"message"</span>&gt; ...  &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
</div>
<h3 class="section-head" id="h-options"><a href="#h-options">Options</a></h3>
<table>
  <thead>
    <tr>
      <th class="w30">Name</th>
      <th class="w30">Type</th>
      <th class="w40">Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>closeSelector</code></td>
      <td><var>string</var></td>
      <td>.close</td>
    </tr>
    <tr>
      <td><code>closeEvent</code></td>
      <td><var>string</var></td>
      <td>click</td>
    </tr>
    <tr>
      <td><code>animationOpen</code></td>
      <td><var>string</var></td>
      <td>fadeIn</td>
    </tr>
    <tr>
      <td><code>animationClose</code></td>
      <td><var>string</var></td>
      <td>fadeOut</td>
    </tr>
  </tbody>
</table>
<h4>Set an option</h4>
<p>Via data attribute:</p>
<pre class="code skip">&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span> data-close-selector=<span class="hljs-string">".my-custom-close"</span>&gt;
    ... &lt;span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>&gt;&lt;/span&gt;
&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
<p>Via Javascript:</p>
<pre class="code skip"><span class="hljs-variable">$(</span><span class="hljs-string">'#my-message'</span>).message({
    <span class="hljs-symbol">closeSelector:</span> <span class="hljs-string">'.my-custom-close'</span>
});
</pre>
<h3 class="section-head" id="h-methods"><a href="#h-methods">Methods</a></h3>
<p><button onclick="$('#message-1').message('open')">Open</button> <button onclick="$('#message-1').message('close')">Close</button></p>
<div class="message open" data-component="message" data-loaded="true" id="message-1">
  You have 2 modules waiting to installation. <a href="#install">Install</a> <span class="close small"></span>
</div>
<table>
  <thead>
    <tr>
      <th>Method</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>close</code></td>
      <td>Manually closes a message.</td>
    </tr>
    <tr>
      <td><code>open</code></td>
      <td>Opens a message if it has been closed.</td>
    </tr>
  </tbody>
</table>
<h4>Example</h4>
<pre class="code">$(<span class="hljs-string">'#my-message'</span>).<span class="hljs-keyword">message</span>(<span class="hljs-string">'close'</span>);</pre>
<h3 class="section-head" id="h-callbacks"><a href="#h-callbacks">Callbacks</a></h3>
<table>
  <thead>
    <tr>
      <th>Callback</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>open</code></td>
      <td>This event fires immediately when the open instance method is called.</td>
    </tr>
    <tr>
      <td><code>opened</code></td>
      <td>This event is fired when the message has been opened, will wait for CSS animation to complete.</td>
    </tr>
    <tr>
      <td><code>close</code></td>
      <td>This event fires immediately when the close instance method is called.</td>
    </tr>
    <tr>
      <td><code>closed</code></td>
      <td>This event is fired when the message has been closed, will wait for CSS animation to complete.</td>
    </tr>
  </tbody>
</table>
<h4>Example</h4>
<pre class="code skip">$(<span class="hljs-string">'#my-message'</span>).on(<span class="hljs-string">'closed.message'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
</span>{
    <span class="hljs-comment">// do something</span>
})
</pre>