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.

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.