Toasts are defined using the VOnsToast component. In Material Design they are also called Snackbars.
<v-ons-toast v-model:visible="isToastVisible">
This is a toast!
</v-ons-toast>
The visible boolean prop can be used to toggle its visibility. v-model:visible 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
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| animation | String |
The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
（翻訳中）
Optional.
|
| animationOptions | Expression |
アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’}
Optional.
|
| visible | Boolean |
要素が見える場合にtrue。
Optional.
|
| 名前 | 概要 |
|---|---|
| preshow | ダイアログが表示される直前に発火します。 |
| postshow | ダイアログが表示された直後に発火します。 |
| prehide | ダイアログが隠れる直前に発火します。 |
| posthide | ダイアログが隠れた後に発火します。 |
| deviceBackButton | Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. （翻訳中） |
| update:visible |
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
|
ダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| 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 | ダイアログのオブジェクト。 |
Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. （翻訳中） |
| event.preventDefault | Function | Avoids the default behavior. （翻訳中） |
| event.callParentHandler | Function | Runs the handler for the immediate parent that supports device back button. （翻訳中） |
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for visible prop.
（翻訳中）
|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。