Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add light notifications

Browse Source
This commit is contained in:
Jeremy Thomas
2020-01-05 12:56:19 +00:00
parent 5405a8b5c8
commit 28eb21b7b5
5 changed files with 65 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/documentation/elements/notification.html
View File

@@ -34,6 +34,17 @@ meta:
{% endfor %}
{% endcapture %}
{% capture notification_light_colors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }} is-light">
<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>
@@ -45,6 +56,7 @@ meta:
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
$notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
});
@@ -70,19 +82,24 @@ document.addEventListener('DOMContentLoaded', () => {
{% 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>. 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>
{% include elements/anchor.html name="Light colors" %}
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% include elements/new-tag.html version="0.8.1" %}
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
</div>
</div>
Each color now comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
{% include elements/snippet.html content=notification_light_colors %}
{% include elements/anchor.html name="JavaScript example" %}
<div class="content">
<p>
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> all on the page, in vanilla JavaScript.
</p>
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
</div>
{% include elements/variables.html type='element' %}