The Toast or Snackbar component is useful for displaying dismissable information or simple actions at (normally) the bottom of the page.
This component does not block user input, allowing the app to continue its flow. For simple toasts, consider ons.notification.toast instead.
| Name | Type | Description |
|---|---|---|
| animation |
String
default |
The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
Optional.
|
| animation-options | Expression |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
Optional.
|
| visible | Boolean | Whether the toast is visible or not. Optional. |
| Name | Description |
|---|---|
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| onDeviceBackButton | Back-button handler. |
| visible | Whether the element is visible or not. |
| Signature | Description |
|---|---|
| show([options]) | Show the element. |
| toggle([options]) | Toggle toast visibility. |
| hide([options]) | Hide toast. |
Show the element.
Returns: Resolves to the displayed element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
Toggle toast visibility.
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
Hide toast.
Returns: Resolves to the hidden element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| Name | Description |
|---|---|
| preshow | Fired just before the toast is displayed. |
| postshow | Fired just after the toast is displayed. |
| prehide | Fired just before the toast is hidden. |
| posthide | Fired just after the toast is hidden. |
Fired just before the toast is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | Toast object. |
| event.cancel | Function | Execute to stop the toast from showing. |
Fired just after the toast is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | Toast object. |
Fired just before the toast is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | Toast object. |
| event.cancel | Function | Execute to stop the toast from hiding. |
Fired just after the toast is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | Toast object. |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.