Toast (Bootstrap): Difference between revisions
Jump to navigation
Jump to search
Line 35: | Line 35: | ||
== Examples == | == Examples == | ||
BASIC | |||
<pre> | |||
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 | |||
</pre> | |||
JavaScript | |||
<pre> | |||
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"); | |||
}; | |||
</pre> | |||
== Output == | == Output == |
Revision as of 22:56, 29 January 2019
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"); };