3.1
Getting Started
API
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)
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 withicon,icon_classtitleandsubtitleas possible keys, that should go inside the header componentbody- Expects a string that should go inside toast's body componentimportant- to adapt the role and aria-live level depending on the content. If it’s an important message like an error, useimportant: true, otherwise useimportant: falseattributesdelay- expect a number which will delay hiding the toast in msautohide- If set true, toast component will automatically hideanimation- If set true, css fade transition will be applied to the toastslots- Using slots option to extend customization of yourheaderbeyond the standard option:show_on- Expects an event as string on which the toast will be showed calling bootstrapsshowmethod.:hide_on- Expects an event as string on which the toast will be hidden calling bootstrapshidemethod.:dispose_on- Expects an event as string on which the toast will be disposed calling bootstrapsdisposemethod.- Additionally, you can add custom
class,attributesordataattributes 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
1
bs_toast header: { title: "Bootstrap", subtitle: "11 mins ago" },
2
body: "Hello, world! This is a toast message."
Copied!
returns
1
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
2
<div class="toast-header">
3
<strong class="mr-auto">Bootstrap</strong>
4
<small>11 mins ago</small>
5
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
6
</div>
7
<div class="toast-body">
8
Hello, world! This is a toast message.
9
</div>
10
</div>
Copied!
Example 2: Color schemes
1
bs_toast class: "bg-primary text-white",
2
header: { title: "Bootstrap", subtitle: "11 mins ago" },
3
body: "Hello, world! This is a toast message."
Copied!
returns
1
<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
2
<div class="toast-header">
3
<strong class="mr-auto">Bootstrap</strong>
4
<small>11 mins ago</small>
5
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
6
</div>
7
<div class="toast-body">
8
Hello, world! This is a toast message.
9
</div>
10
</div>
Copied!
Example 3: Trigger Javascript Behaviors with onclick methode
1
bs_toast show_on: "showToast", hide_on: "hideToast",
2
body: "Hello, world! This is a toast message."
3
​
4
onclick emit: "showToast" do
5
bs_btn "Show Toasts"
6
end
7
onclick emit: "hideToast" do
8
bs_btn "Hide Toasts"
9
end
Copied!
Last modified 4mo ago