ons-toast

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.

Tutorial

See also

Attributes

Name Type Default Value 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.
var String Variable name to refer this toast dialog. Optional. Works only during initialization.
ons-preshow Expression Allows you to specify custom behavior when the “preshow” event is fired. Optional. Works only during initialization.
ons-prehide Expression Allows you to specify custom behavior when the “prehide” event is fired. Optional. Works only during initialization.
ons-postshow Expression Allows you to specify custom behavior when the “postshow” event is fired. Optional. Works only during initialization.
ons-posthide Expression Allows you to specify custom behavior when the “posthide” event is fired. Optional. Works only during initialization.
ons-destroy Expression Allows you to specify custom behavior when the “destroy” event is fired. Optional. Works only during initialization.

Properties

Name Description
onDeviceBackButton Back-button handler.
visible Whether the element is visible or not.

Methods Summary

Signature Description
show([options]) Show the element.
toggle([options]) Toggle toast visibility.
hide([options]) Hide toast.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that’s only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Methods

show([options]): Promise

Show the element.

Returns: Resolves to the displayed element

Parameters
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([options])

Toggle toast visibility.

Parameters
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([options]): Promise

Hide toast.

Returns: Resolves to the hidden element

Parameters
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'}.

on(eventName, listener)

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener)

Add an event listener that’s only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener])

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.