Toast (Bootstrap): Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
(Created page with "file:BsToast1.png file:BsToast2.png == Description == Use the Toast control to display a combination of text and images. Since all the fields are optional, there are...")
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
== Description ==
== 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.
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.


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.
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.


== Properties and Methods ==
== Properties and Methods ==
Line 13: Line 13:
{| class="wikitable"
{| class="wikitable"
|-
|-
| footer || Optional. The text at the bottom of the Toast. Class, style and text can be specified.
| animation || Should the Toast show and hide with an animation?
|-
|-
| header || Optional. The text at the top of the Toast. Class, style and text can be specified.
| autohide || Should the Toast close automatically once opened?
|-
|-
| image || Optional. The image displayed under the ''header''. src, class, style, height and width can be specified.
| delay || If ''autohide'', how long should the Toast display?
|-
|-
| position || How will children be positioned? Absolute, fixed, relative or static.
| image || Optional. A 16x16 image. src, class, style, height and width can be specified.
|-
|-
| subtitle || Optional. The text under the ''title''. Class, style and value 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 ''subtitle''. 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 under the ''image''. Class, style and value can be specified.
| title || Optional. The text to the right of the ''image''. Class, style and value can be specified.
|-
|-
|}
|}
Line 33: Line 33:
Standard [[events|events]] are supported.  
Standard [[events|events]] are supported.  


== Examples ==
== Example ==


This is a passive control - no code sample needed. Try Toasts in the AppStudio Samples.
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// 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");
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' 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
</syntaxhighlight>
</tabber>


== Output ==
== Output ==

Revision as of 15:36, 10 March 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.

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.

Example

// 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");
};

' 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

Output