diff options
Diffstat (limited to 'exampleSite/content/blog/content/docs/messages.md')
| -rw-r--r-- | exampleSite/content/blog/content/docs/messages.md | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/exampleSite/content/blog/content/docs/messages.md b/exampleSite/content/blog/content/docs/messages.md deleted file mode 100644 index 11bc2ec..0000000 --- a/exampleSite/content/blog/content/docs/messages.md +++ /dev/null @@ -1,159 +0,0 @@ -+++ -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 -+++ - -<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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<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>></span> - <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h5</span>></span> - ... - <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close small"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><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>> ... <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"close small"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<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>> - ... <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>></span> -</<span class="hljs-keyword">div</span>> -</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> |