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!

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



名前 型 / デフォルト値 概要
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 アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
visible Boolean Specify the visibility of the component. (翻訳中) Optional.


Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。