Toast
A non-blocking notification that slides in from a screen edge and auto-dismisses after a configurable timeout. Multiple toasts stack automatically. Use the static show method for one-line usage, or create an instance for more control. Configure side to choose the screen edge ('top', 'bottom', 'top-start', etc.) and showProgress to display a countdown bar.
// Simplest usage
Toast.show('Just toasting');
// With configuration
Toast.show({
html : 'Well toasted',
timeout : 5000,
showProgress : false
});
Useful configs and properties
| Config | Description |
|---|---|
| html | HTML content of the toast |
| timeout | Auto-dismiss delay in milliseconds (0 to persist) |
| showProgress | Show a progress bar indicating time remaining |
| side | Screen edge to show at ('top', 'bottom', etc.) |
To show toasts from the top and have them stack downwards, specify side as 'top':
Toast.show({
html : 'Well toasted',
side : 'top'
});
By default, Toasts show at the inline-end side of the screen, so on the right in LTR environments and on the left in RTL environments.
Append -start to the side to display at the required edge, or just use side : 'start' to show at the bottom but at the inline-start side of the screen.
Toast.show({
html : 'Well toasted on the left',
side : 'start'
});
See also
- MessageDialog - Modal dialog for confirmations
- Popup - General floating popup
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Show a progress bar indicating the time remaining until the toast is dismissed.
-
Timeout (in ms) until the toast is automatically dismissed. Set to 0 to never hide.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Toast class, or subclass thereof.
-
Identifies an object as an instance of Toast class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
hideAll( )static
Hide all visible toasts
-
Hide the toast
-
Show the toast
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-toast-background | Toast background |
| --b-toast-border-radius | Toast border radius |
| --b-toast-color | Toast color |
| --b-toast-padding | Toast padding |
| --b-toast-progress-color | Toast progress bar color |
| --b-toast-progress-height | Toast progress bar height |
| --b-toast-transition-duration | Toast transition duration |