toasts docs and example class option added

js/tabler.js

@@ -58,6 +58,7 @@ $(document).ready(function() {
 
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
+  $('[data-toggle="toast"]').toast();
 
   /*
   Imask plugin

pages/_docs/toasts.md

@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-
-
 ### Default markup
 
 {% example %}
 {% include ui/toast.html %}
 {% endexample %}
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
+
+{% example html class=bg-gray %}
+{% include ui/toast.html %}
+{% endexample %}
+
+### Stacking toasts
+
+If you want to stack toasts just put them in the same container.
+
+{% example %}
+{% include ui/toast.html person-id=3 %}
+{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
+{% endexample %}

pages/_includes/ui/toast.html

@@ -1,6 +1,6 @@
 {% assign person-id = include.person-id | default: 2 %}
 {% assign person = site.data.people[person-id] %}
-<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
    <div class="toast-header">
       {% include ui/avatar.html person=person class="mr-2" size="sm" %}
       <strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
       </button>
    </div>
    <div class="toast-body">
-      Hello, world! This is a toast message.
+      {{ include.text | default: 'Hello, world! This is a toast message.' }}
    </div>
 </div>

pages/_plugins/jekyll-example.rb

@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end

scss/ui/_toasts.scss

@@ -1,3 +1,6 @@
 .toast-header {
   user-select: none;
 }
+.toast button[data-dismiss="toast"]{
+  outline: none;
+}