v-ons-alert-dialog

現在のスクリーンの上に表示するアラートダイアログです。ユーザに対する問いかけ、警告、エラーメッセージを表示するのに利用できます。タイトルやコンテンツやボタンは簡単にカスタマイズでき、実行しているプラットフォームに併せてスタイルが自動的に切り替わります。

実例

Alert dialogs

Alert dialogs are defined using <v-ons-alert-dialog> and <v-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.

To show or hide the dialog the visible prop is used. An update:visible event is fired when the user interacts with the component (taps the background mask). Use this event to refresh the value of visible prop. Vue’s sync modifier can also be used.

Custom alerts

VOnsAlertDialog allows to create custom alerts with optional inputs, methods or anything else. We can pass all the information with props:

<v-ons-alert-dialog modifier="rowfooter"
  :title="myTitle"
  :footer="{
    Cancel: () => isVisible = false,
    Ok: () => isVisible = false
  }"
  :visible.sync="isVisible"
>

  Content here
</v-ons-alert-dialog>

For higher control, it is also possible to use slots (can be combined with props):

<v-ons-alert-dialog modifier="rowfooter"
  :visible.sync="isVisible"
>
  <span slot="title">Title</span>

  Content here

  <template slot="footer">
    <v-ons-alert-dialog-button @click="isVisible = false">Cancel</v-ons-alert-dialog-button>
    <v-ons-alert-dialog-button @click="isVisible = false">Ok</v-ons-alert-dialog-button>
  </template>
</v-ons-alert-dialog>

The optional rowfooter modifier forces the buttons to be displayed on a single row rather than a column.

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

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

関連情報

Prop一覧

名前 型 / デフォルト値 概要
cancelable Boolean この属性を設定すると、ダイアログの背景をタップしたりAndroidデバイスのバックボタンを押すとダイアログが閉じるようになります。 Optional.
disabled Boolean この属性がある時、アラートダイアログはdisabled状態になります。 Optional.
Object Object keys will be treated as button names and their corresponding values must be functions that are called on click. It can be provided inside a slot="footer" component instead. (翻訳中) Optional.
mask-color String 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 Optional.
modifier String ダイアログの見た目を指定します。 Optional.
options.animation String ダイアログを表示する際のアニメーション名を指定します。デフォルトでは”none”か”default”が指定できます。 Optional.
options.animationOptions Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例:{duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
title String Represents the dialog title. It can be provided inside a slot="title" component instead. (翻訳中) Optional.
visible Boolean Specify the visibility of the component. (翻訳中) Optional.

プリセットのmodifier

Name 概要
material マテリアルデザインのスタイル
rowfooter フッターの複数のボタンを水平に配置

イベント

名前 概要
preshow アラートダイアログが表示される直前に発火します。
postshow アラートダイアログが表示された直後に発火します。
prehide アラートダイアログが隠れる直前に発火します。
posthide アラートダイアログが隠れた後に発火します。
update:visible Fired right after user interaction. Useful to update visible prop. (翻訳中)
deviceBackButton Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. (翻訳中)
preshow

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

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

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

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

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

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

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

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

Fired right after user interaction. Useful to update visible prop. (翻訳中)

パラメーター
名前 概要
event Number New value for visible prop. (翻訳中)
deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. (翻訳中)

パラメーター
名前 概要
event Object Event object. (翻訳中)
event.preventDefault Function Avoids the default behavior. (翻訳中)
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button. (翻訳中)

お困りですか?

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

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

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