ons-toast

実例

Dialogs

Dialogs are defined using the <ons-dialog>, <ons-alert-dialog> and <ons-toast> tags.

<ons-dialog var="dialog">
  This is a dialog!
</ons-dialog>

var attribute is used to store the dialog in a variable for later access.

Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

<ons-alert-dialog>
  <div class="alert-dialog-title">Warning!</div>
  <div class="alert-dialog-content">
    An error has occurred!
  </div>
  <div class="alert-dialog-footer">
    <button class="alert-dialog-button">Cancel</button>
    <button class="alert-dialog-button">OK</button>
  </div>
</ons-alert-dialog>

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

Displaying a dialog

To display a dialog you need to get a reference to the element and execute the show(options) method. It is hidden with the hide(options) method.

Loading from a template

Another way to use dialogs is with the ons.createElement(template) utility function. The dialog needs to be defined as a template and the function returns a Promise that resolves to the dialog element.

<template id="dialog.html">
  <ons-dialog>
    This dialog is defined as a template.
  </ons-dialog>
</template>
ons
  .createElement('dialog.html', { append: true })
  .then(function(dialog) {
    dialog.show();
  });

For AngularJS, an extra parameter can be passed to specify the scope of the new popover: ons.createElement('dialog.html', { parentScope: $scope });

The cancelable attribute

The <ons-dialog>, <ons-alert-dialog> and <ons-toast> support the cancelable attribute. This enables hiding the dialog by tapping outside of it or by pressing the back button on Android devices.

<ons-dialog cancelable>
  This dialog can be cancelled!
</ons-dialog>

Try adding the cancelable attribute to one of the dialogs to see how it works.

Notification

Another way to display dialogs is with the ons.notification methods:

  • ons.notification.alert(options)
  • ons.notification.confirm(options)
  • ons.notification.prompt(options)
  • ons.notification.toast(options)

These methods all return a Promise. For the confirm it resolves to the index of the button pressed and for the prompt it resolves to the user input.

ons
  .notification.prompt({message: 'What is your name?'})
  .then(function(name) {
    ons.notification.alert('Hello ' + name);
  });

関連情報

属性

名前 型 / デフォルト値 概要
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.
var String このトーストを参照するための名前を指定します。 Optional. 初期化時のみ有効
ons-preshow Expression “preshow”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-prehide Expression “prehide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-postshow Expression “postshow”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-posthide Expression “posthide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-destroy Expression “destroy”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効

プロパティ概要

名前 概要
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue

メソッド

シグネチャ 概要
show([options]) Show the element. (翻訳中)
toggle([options]) Toggle toast visibility. (翻訳中)
hide([options]) Hide toast. (翻訳中)
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしlistenerパラメータが指定されなかった場合、そのイベントのリスナーが全て削除されます。
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’}
on(eventName, listener)

イベントリスナーを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火された際に呼び出されるコールバックを指定します。
once(eventName, listener)

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出されるコールバックを指定します。
off(eventName, [listener])

イベントリスナーを削除します。もしlistenerパラメータが指定されなかった場合、そのイベントのリスナーが全て削除されます。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーの関数オブジェクトを渡します。

お困りですか?

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

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

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