AngularJS 1 Reference > ons-dialog

ons-dialog

実例

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);
  });

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
modifier String ダイアログの表現を指定します。 Optional.
cancelable If this attribute is set the dialog can be closed by tapping the background or by pressing the back button on Android devices. （翻訳中） Optional.
disabled この属性がある時、ダイアログはdisabled状態になります。 Optional.
animation String
default 		ダイアログを表示する際のアニメーション名を指定します。”none”もしくは”default”を指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: 'ease-in'} Optional.
mask-color String
rgba(0, 0, 0, 0.2) 		背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 Optional.
visible Boolean 要素が見える場合にtrue。 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. 初期化時のみ有効

プロパティ概要

[編集]
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue。
disabled 無効化されている場合にtrue。
cancelable Whether the dialog is cancelable or not. A cancelable dialog can be closed by tapping the background or by pressing the back button on Android devices. （翻訳中）
maskColor 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。

プリセットのmodifier

[編集]
Name 概要
material マテリアルデザインのダイアログを表示します。

メソッド

[編集]
シグネチャ 概要
show([options]) ダイアログを開きます。
hide([options]) ダイアログを閉じます。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。
show([options]): Promise

ダイアログを開きます。

返り値: Resolves to the displayed element.

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “slide”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
options.callback Function ダイアログが表示され終わった後に呼び出される関数オブジェクトを指定します。
hide([options]): Promise

ダイアログを閉じます。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “slide”のいずれかを指定できます。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
options.callback Function ダイアログが隠れた後に呼び出される関数オブジェクトを指定します。
on(eventName, listener)

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

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
once(eventName, listener)

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

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
off(eventName, [listener])

イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。

イベント

[編集]
名前 概要
preshow ダイアログが表示される直前に発火します。
postshow ダイアログが表示された直後に発火します。
prehide ダイアログが隠れる直前に発火します。
posthide ダイアログが隠れた後に発火します。
dialogcancel Fired when the dialog is canceled. （翻訳中）
preshow

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

パラメーター
名前 型 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示がキャンセルされます。
postshow

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

パラメーター
名前 型 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
prehide

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

パラメーター
名前 型 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの非表示がキャンセルされます。
posthide

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

パラメーター
名前 型 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
dialogcancel

Fired when the dialog is canceled. （翻訳中）

パラメーター
名前 型 概要

お困りですか?

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

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

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