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).
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 |
要素が見える場合にtrue。
Optional.
|
| visible | Boolean | Specify the visibility of the component. （翻訳中） Optional. |
| 名前 | 概要 |
|---|---|
| preshow | ダイアログが表示される直前に発火します。 |
| postshow | ダイアログが表示された直後に発火します。 |
| prehide | ダイアログが隠れる直前に発火します。 |
| posthide | ダイアログが隠れた後に発火します。 |
ダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの表示を止めます。 |
ダイアログが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
ダイアログが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログが閉じようとするのを止めます。 |
ダイアログが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。