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

Dialogs

There are three components used to show dialogs: VOnsDialog, VOnsAlertDialog and VOnsToast. The VOnsDialog component is a general dialog where you can put any content. The VOnsAlertDialog has some default styles that make it easy to show errors, warnings or questions to the user. And VOnsToast is a message (with optional button) that does not stop the app flow.

To show or hide the dialog the visible prop is used.

<v-ons-dialog cancelable
  :visible.sync="show"
>
  Hi!

  <v-ons-button @click="show = false">
    Close
  </v-ons-button>
</v-ons-dialog>

An update:visible event is fired when the user interacts with the component (taps the background mask). Use this event to refresh the value of visible prop. Vue’s sync modifier can also be used.

Notification methods

The $ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

1.

$ons.notification.alert(message, options)

2.

$ons.notification.confirm(message, options)

3.

$ons.notification.prompt(message, options)

4.

$ons.notification.toast(message, options)

They all return a Promise object that can be used to handle the input from the user.

$ons.notification.confirm('Are you ready?')
  .then((response) => {
    // Handle response.
  });

Custom alerts

VOnsAlertDialog allows to create custom alerts with optional inputs, methods or anything else. We can pass all the information with props:

<v-ons-alert-dialog modifier="rowfooter"
  :title="myTitle"
  :footer="{
    Cancel: () => isVisible = false,
    Ok: () => isVisible = false
  }"
  :visible.sync="isVisible"
>

  Content here
</v-ons-alert-dialog>

For higher control, it is also possible to use slots (can be combined with props):

<v-ons-alert-dialog modifier="rowfooter"
  :visible.sync="isVisible"
>
  <span slot="title">Title</span>

  Content here

  <template slot="footer">
    <button class="alert-dialog-button" @click="isVisible = false">Cancel</button>
    <button class="alert-dialog-button" @click="isVisible = false">Ok</button>
  </template>
</v-ons-alert-dialog>

The optional rowfooter modifier forces the buttons to be displayed on a single row rather than a column.

See also

Props

Name Type Default Value 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.

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.