Reference > v-ons-toast

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

Toasts

Toasts are defined using the VOnsToast component. In Material Design they are also called Snackbars.

<v-ons-toast v-model:visible="isToastVisible">
  This is a toast!
</v-ons-toast>

The visible boolean prop can be used to toggle its visibility. v-model:visible can be used to keep the state in sync.

Toasts are hidden by default and, like other dialogs, they are attached to the body even if they are placed inside another component (portal).

Notification methods

Another way to display toasts is with the $ons.notification, which returns a Promise. Unlike the previous version, all the toasts created with this method will be part of a notification queue, being visible only one at a time. The force option disables this feature.

$ons.notification.toast('Hello ' + name, { timeout: 2000 }); // Shows from 0s to 2s
$ons.notification.toast('Good-bye ' + name, { timeout: 1000 }); // Shows from 2s to 3s

See also

Props

Name Type Description
animation String The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". Optional.
animationOptions 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.

Events

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.
deviceBackButton Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.
update:visible Fired right after user interaction. Useful to update visible prop.
preshow

Fired just before the toast is displayed.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
event.cancel Function Execute to stop the toast from showing.
postshow

Fired just after the toast is displayed.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
prehide

Fired just before the toast is hidden.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
event.cancel Function Execute to stop the toast from hiding.
posthide

Fired just after the toast is hidden.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button.
update:visible

Fired right after user interaction. Useful to update visible prop.

Parameters
Name Type Description
event Number New value for visible prop.

Need Help?

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.