Toast (Bootstrap): Difference between revisions
Jump to navigation
Jump to search
Line 4: | Line 4: | ||
== Description == | == Description == | ||
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. | |||
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position. | |||
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. | 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. |
Revision as of 22:58, 29 January 2019
Description
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
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"); };