|
@@ -34,10 +34,49 @@ meta:
|
|
|
{% endfor %}
|
|
|
{% endcapture %}
|
|
|
|
|
|
+{% capture notification_js_html %}
|
|
|
+<div class="notification">
|
|
|
+ <button class="delete"></button>
|
|
|
+ Lorem ipsum
|
|
|
+</div>
|
|
|
+{% endcapture %}
|
|
|
+
|
|
|
+{% capture notification_js_code %}
|
|
|
+document.addEventListener('DOMContentLoaded', () => {
|
|
|
+ (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
|
|
+ $notification = $delete.parentNode;
|
|
|
+ $delete.addEventListener('click', () => {
|
|
|
+ $notification.parentNode.removeChild($notification);
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
|
|
+{% endcapture %}
|
|
|
+
|
|
|
{% include elements/snippet.html content=notification %}
|
|
|
|
|
|
{% include elements/anchor.html name="Colors" %}
|
|
|
|
|
|
{% include elements/snippet.html content=notification_colors %}
|
|
|
|
|
|
+<div id="notificationJsExample" class="message is-info">
|
|
|
+ <h4 class="message-header">Javascript delete notification</h4>
|
|
|
+ <div class="message-body">
|
|
|
+ <div class="content">
|
|
|
+ <p>
|
|
|
+ The Bulma package <strong>does not come with any JavaScript</strong>.
|
|
|
+ <br>
|
|
|
+ Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ {% highlight html %}{{ notification_js_html }}{% endhighlight %}
|
|
|
+
|
|
|
+ {% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
{% include elements/variables.html type='element' %}
|