JavaScript Reference > ons-toast

ons-toast

実例

Toasts

Toasts are defined using the <ons-toast> tag. In Material Design they are also called Snackbars.

<ons-toast id="dialog-1">
  This is a toast!
</ons-toast>

They can be located inside templates or separated files and be created with ons.createElement as any other dialog.

Toasts are hidden by default and usually attached as direct children of the <body> tag.

Displaying a toast

To display a toast you need to get a reference to the element and execute the show(options) method.

document
  .querySelector('ons-toast')
  .show();

It is hidden with the hide(options) method.

Toasts can be toggled with the toggle(options) method.

Notification

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
default 		The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". （翻訳中） Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
visible Boolean 要素が見える場合にtrue。 Optional.

プロパティ概要

[編集]
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue。

メソッド

[編集]
シグネチャ 概要
show([options]) Show the element. （翻訳中）
toggle([options]) Toggle toast visibility. （翻訳中）
hide([options]) Hide toast. （翻訳中）
show([options]): Promise

Show the element. （翻訳中）

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". （翻訳中）
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
toggle([options])

Toggle toast visibility. （翻訳中）

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". （翻訳中）
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
hide([options]): Promise

Hide toast. （翻訳中）

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". （翻訳中）
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}

イベント

[編集]
名前 概要
preshow ダイアログが表示される直前に発火します。
postshow ダイアログが表示された直後に発火します。
prehide ダイアログが隠れる直前に発火します。
posthide ダイアログが隠れた後に発火します。
preshow

ダイアログが表示される直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.toast Object ダイアログのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示を止めます。
postshow

ダイアログが表示された直後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.toast Object ダイアログのオブジェクト。
prehide

ダイアログが隠れる直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.toast Object ダイアログのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログが閉じようとするのを止めます。
posthide

ダイアログが隠れた後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.toast Object ダイアログのオブジェクト。

お困りですか?

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

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

あわせて、下記の情報も参考にしてください。