現在のスクリーンの上に表示するアラートダイアログです。ユーザに対する問いかけ、警告、エラーメッセージを表示するのに利用できます。タイトルやコンテンツやボタンは簡単にカスタマイズでき、実行しているプラットフォームに併せてスタイルが自動的に切り替わります。
Alert dialogs are defined using <ons-alert-dialog> and <ons-alert-dialog-button> tags.
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 id="dialog-1">
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
An error has occurred!
</div>
<div class="alert-dialog-footer">
<ons-alert-dialog-button>Cancel</ons-alert-dialog-button>
<ons-alert-dialog-button>OK</ons-alert-dialog-button>
</div>
</ons-alert-dialog>
Alert dialogs are hidden by default and usually attached as direct children of the <body> tag.
To display an alert dialog you need to get a reference to the element and execute the show(options) method.
document
.getElementById('dialog-1')
.show();
It is hidden with the hide(options) method.
Another way to use alert dialogs is with the ons.createElement(template) utility function. The dialog needs to be defined as a template (or a separate file) and the function returns a Promise that resolves to the dialog element.
<template id="dialog.html">
<ons-alert-dialog>
This dialog is defined as a template.
</ons-alert-dialog>
</template>
ons
.createElement('dialog.html', { append: true })
.then(function(dialog) {
dialog.show();
});
Do not forget attaching the created dialog to the DOM. This can be done by passing append options to ons.createElement.
<ons-alert-dialog> supports the cancelable attribute. This enables hiding the dialog by tapping outside of it or by pressing the back button on Android devices.
<ons-alert-dialog cancelable>
This dialog can be cancelled!
</ons-alert-dialog>
Try adding the cancelable attribute to the dialog to see how it works.
Another way to display alert dialogs is with the ons.notification methods:
ons.notification.alert(options)ons.notification.confirm(options)ons.notification.prompt(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 | この属性を設定すると、ダイアログの背景をタップしたりAndroidデバイスのバックボタンを押すとダイアログが閉じるようになります。 Optional. | |
| disabled | この属性がある時、アラートダイアログはdisabled状態になります。 Optional. | |
| animation |
String
default |
ダイアログを表示する際のアニメーション名を指定します。デフォルトでは”none”か”default”が指定できます。 Optional. |
| animation-options | Expression | アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{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.
|
| 名前 | 概要 |
|---|---|
| disabled |
無効化されている場合にtrue。
|
| cancelable | そのダイアログがキャンセル可能かどうかを表します。キャンセル可能なダイアログは、背景をタップするかAndroidデバイスのバックボタンを押すことで閉じることが出来るようになります。 |
| maskColor | 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 |
| visible |
要素が見える場合にtrue。
|
| onDeviceBackButton | バックボタンハンドラ。 |
| animationOptions | アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’} |
| Name | 概要 |
|---|---|
| material | マテリアルデザインのスタイル |
| rowfooter | フッターの複数のボタンを水平に配置 |
| シグネチャ | 概要 |
|---|---|
| show([options]) | ダイアログを表示します。 |
| hide([options]) | ダイアログを閉じます。 |
ダイアログを表示します。
返り値: 表示される要素を解決するPromiseオブジェクトを返します。
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクトです。 |
| options.animation | String | アニメーション名を指定します。指定できるのは、”fade”, “none”のいずれかです。 |
| options.animationOptions | String |
アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
|
| options.callback | Function | ダイアログが表示され終わった時に呼び出されるコールバックを指定します。 |
ダイアログを閉じます。
返り値: 隠れた要素を解決するPromiseオブジェクトを返します。
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.animation | String | アニメーション名を指定します。”fade”, “none”のいずれかを指定します。 |
| options.animationOptions | String |
アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
|
| options.callback | Function | このダイアログが閉じた時に呼び出されるコールバックを指定します。 |
| 名前 | 概要 |
|---|---|
| preshow | アラートダイアログが表示される直前に発火します。 |
| postshow | アラートダイアログが表示された直後に発火します。 |
| prehide | アラートダイアログが隠れる直前に発火します。 |
| posthide | アラートダイアログが隠れた後に発火します。 |
| dialogcancel | Fired when the dialog is canceled. （翻訳中） |
アラートダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | アラートダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、アラートダイアログの表示を止めます。 |
アラートダイアログが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | アラートダイアログのオブジェクト。 |
アラートダイアログが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | アラートダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、アラートダイアログが閉じようとするのを止めます。 |
アラートダイアログが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.alertDialog | Object | アラートダイアログのオブジェクト。 |
Fired when the dialog is canceled. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。