bulma/docs/documentation/elements/notification.html
Roman Pushkin e6951f74e6 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.
2019-03-03 06:51:37 +00:00

83 lines
2.6 KiB
HTML

---
title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
breadcrumb:
- home
- documentation
- elements
- elements-notification
meta:
colors: true
sizes: false
variables: true
---
{% capture notification %}
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endcapture %}
{% capture notification_colors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% 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' %}