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.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_class
title
andsubtitle
as 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: false
attributesdelay
- 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 yourheader
beyond the standard option:show_on
- Expects an event as string on which the toast will be showed calling bootstrapsshow
method.:hide_on
- Expects an event as string on which the toast will be hidden calling bootstrapshide
method.:dispose_on
- Expects an event as string on which the toast will be disposed calling bootstrapsdispose
method.- Additionally, you can add custom
class
,attributes
ordata
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.
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>
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>
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
Last modified 1yr ago