Toast (Bootstrap)
Description
Use the Toast control to display a combination of text and images. Since all the fields are optional, there are a lot of different ways to display data using this control.
It can also act as a container for child controls. In the example above, the Button is a child which has been added to the Toast.
Properties and Methods
Standard properties are supported, plus:
animation | Should the Toast show and hide with an animation? |
autohide | Should the Toast close automatically once opened? |
delay | If autohide, how long should the Toast display? |
image | Optional. A 16x16 image. src, class, style, height and width can be specified. |
subtitle | Optional. The text to the right of the title. Class, style and value can be specified. |
text | Optional. The text under the title. HTML is OK. Class, style and value can be specified. |
title | Optional. The text to the right of the image. Class, style and value can be specified. |
Events
Standard events are supported.
Examples
BASIC
Function Button1_onclick() $("#Toast1").toast("show") End Function Function Button3_onclick() Toast3_title.innerText = "Custom title" Toast3_subtitle.innerText = "Custom Subtitle" Toast3_text.innerHTML = "Text <b>can</b> include HTML styling and be <br> more than one line." $("#Toast3").toast("show") End Function
JavaScript
Button1.onclick = function() { $("#Toast1").toast("show"); }; Button3.onclick = function() { Toast3_title.innerText = "Custom title"; Toast3_subtitle.innerText = "Custom Subtitle"; Toast3_text.innerHTML = "Text <b>can</b> include HTML styling and be <br> more than one line."; $("#Toast3").toast("show"); };