React Reference > ons.notification Component

<ons.notification />

いくつかの種類のアラートダイアログを作成するためのユーティリティメソッドを収めたオブジェクトです。

実例

Notification methods

The ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

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

They all return a Promise object that can be used to handle the input from the user.

ons.notification.confirm('Are you ready?')
  .then((response) => {
    // Handle response.
  });

メソッド

[編集]
シグネチャ 概要
alert(message [, options] | options)

ユーザーへメッセージを見せるためのアラートダイアログを表示します。 表示するメッセージは、テキストかもしくはHTMLを指定できます。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。
confirm(message [, options] | options)

ユーザに確認を促すダイアログを表示します。 デオルとのボタンラベルは、”Cancel”と”OK”ですが、これはこのメソッドの引数でカスタマイズできます。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。
prompt(message [, options] | options)

ユーザーに入力を促すダイアログを表示します。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。
toast(message [, options] | options)

Display a simple notification toast with an optional button that can be used for simple actions. It can be called in the following ways:

  ons.notification.toast(message, options);
  ons.notification.toast(options);
（翻訳中）
alert(message [, options] | options): Promise

ユーザーへメッセージを見せるためのアラートダイアログを表示します。 表示するメッセージは、テキストかもしくはHTMLを指定できます。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。

返り値:

パラメーター
名前 型 概要
message String Notification message. This argument is optional but if it’s not defined either options.message or options.messageHTML must be defined instead. （翻訳中）
options Object オプションを指定するオブジェクトです。
options.message String アラートダイアログに表示する文字列を指定します。
options.messageHTML String アラートダイアログに表示するHTMLを指定します。
options.buttonLabels String | Array 確認ボタンのラベルを指定します。”OK”がデフォルトです。
options.primaryButtonIndex Number プライマリボタンのインデックスを指定します。デフォルトは 0 です。
options.cancelable Boolean ダイアログがキャンセル可能かどうかを指定します。
options.animation String アラートダイアログを表示する際のアニメーション名を指定します。”none”, “fade”のいずれかを指定できます。
options.id String ons-alert-dialog要素のID。
options.class String ons-alert-dialog要素のclass。
options.title String アラートダイアログの上部に表示するタイトルを指定します。”Alert”がデフォルトです。
options.modifier String アラートダイアログのmodifier属性の値を指定します。
options.maskColor String 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。
options.callback Function アラートダイアログが閉じられた時に呼び出される関数オブジェクトを指定します。
confirm(message [, options] | options): Promise

ユーザに確認を促すダイアログを表示します。 デオルとのボタンラベルは、”Cancel”と”OK”ですが、これはこのメソッドの引数でカスタマイズできます。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。

返り値:

パラメーター
名前 型 概要
message String Notification message. This argument is optional but if it’s not defined either options.message or options.messageHTML must be defined instead. （翻訳中）
options Object Parameter object.
options.buttonLabels Array ボタンのラベルの配列を指定します。[“Cancel”, “OK”]がデフォルトです。
options.primaryButtonIndex Number プライマリボタンのインデックスを指定します。デフォルトは 1 です。
prompt(message [, options] | options): Promise

ユーザーに入力を促すダイアログを表示します。 このメソッドの引数には、options.messageもしくはoptions.messageHTMLのどちらかを必ず指定する必要があります。

返り値:

パラメーター
名前 型 概要
message String Notification message. This argument is optional but if it’s not defined either options.message or options.messageHTML must be defined instead. （翻訳中）
options Object オプションを指定するオブジェクトです。
options.buttonLabels String | Array 確認ボタンのラベルを指定します。”OK”がデフォルトです。
options.primaryButtonIndex Number プライマリボタンのインデックスを指定します。デフォルトは 0 です。
options.placeholder String テキスト欄のプレースホルダに表示するテキストを指定します。
options.defaultValue String テキスト欄のデフォルトの値を指定します。
options.inputType String Type of the input element (password, date…). Default is text. （翻訳中）
options.autofocus Boolean input要素に自動的にフォーカスするかどうかを指定します。デフォルトはtrueです。Cordova環境では、この機能を有効にするためには config.xml で KeyboardDisplayRequiresUserAction を false に設定する必要があります。
options.submitOnEnter Boolean Enterが押された際にそのformをsubmitするかどうかを指定します。デフォルトはtrueです。
toast(message [, options] | options): Promise

Display a simple notification toast with an optional button that can be used for simple actions. It can be called in the following ways:

  ons.notification.toast(message, options);
  ons.notification.toast(options);
（翻訳中）

返り値:

パラメーター
名前 型 概要
message String Toast message. This argument is optional but if it’s not defined then options.message must be defined instead. （翻訳中）
options Object オプションを指定するオブジェクトです。
options.message String トーストに表示する文字列を指定します。
options.buttonLabel String 確認ボタンのラベルを指定します。
options.animation String トーストを表示する際のアニメーション名を指定します。”none”, “fade”, “ascend”, “lift”, “fall”のいずれかを指定できます。
options.timeout Number Number of miliseconds where the toast is visible before hiding automatically. （翻訳中）
options.force Boolean If true, the toast skips the notification queue and is shown immediately. Defaults to false. （翻訳中）
options.id String ons-toast要素のID。
options.class String ons-toast要素のclass。
options.modifier String トーストのmodifier属性の値を指定します。
options.callback Function トーストが閉じられた時に呼び出される関数オブジェクトを指定します。

お困りですか?

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

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

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