Vue 2 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 :visible.sync="isToastVisible">
  This is a toast!
</v-ons-toast>

The visible boolean prop can be used to toggle its visibility. The sync modifier 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
options.animation String The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". Optional.
options.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.
visible Boolean Specify the visibility of the component. 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.
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.

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.