mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add example on how to delete notifications with JS
This change adds example to delete notifications. It's automatically loaded on dom-ready, and sets `click` handler for all `.delete` elements of `.notification`s.
This commit is contained in:
parent
e6ca4af4b9
commit
e6951f74e6
@ -34,10 +34,49 @@ meta:
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endcapture %}
|
{% 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/snippet.html content=notification %}
|
||||||
|
|
||||||
{% include elements/anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include elements/snippet.html content=notification_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' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
Loading…
Reference in New Issue
Block a user