Toast

The Bootstrap Toast component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.
bs_toast(*args, &block)
Returns a bootstrap Toast containing text or content specified by a block. Also the Toast is customizable with the following options.
Optional options
header - Expects a string or a hash with icon, icon_class title and subtitle as possible keys, that should go inside the header component
body - Expects a string that should go inside toast's body component
important - to adapt the role and aria-live level depending on the content. If it’s an important message like an error, use important: true, otherwise use important: false attributes
delay - expect a number which will delay hiding the toast in ms
autohide - If set true, toast component will automatically hide
animation - If set true, css fade transition will be applied to the toast
slots - Using slots option to extend customization of your header beyond the standard option
:show_on - Expects an event as string on which the toast will be showed calling bootstraps show method.
:hide_on - Expects an event as string on which the toast will be hidden calling bootstraps hide method.
:dispose_on - Expects an event as string on which the toast will be disposed calling bootstraps dispose method.
Additionally, you can add custom class, attributes or data attributes to the toast component
Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding Toast div.
Examples
Example 1: Basic Toast
bs_toast header: { title: "Bootstrap", subtitle: "11 mins ago" },
      body: "Hello, world! This is a toast message."
returns
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Example 2: Color schemes
bs_toast class: "bg-primary text-white",
      header: { title: "Bootstrap", subtitle: "11 mins ago" },
      body: "Hello, world! This is a toast message."
returns
<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Example 3: Trigger Javascript Behaviors with onclick methode
bs_toast show_on: "showToast", hide_on: "hideToast",
  body: "Hello, world! This is a toast message."
​
onclick emit: "showToast" do
  bs_btn "Show Toasts"
end
onclick emit: "hideToast" do
  bs_btn "Hide Toasts"
end

Spinner

Tooltip

Last modified 1yr ago