v-ons-dialog

実例

Dialogs

Simple dialogs are defined using the VOnsDialog component.

To show or hide the dialog the visible prop is used.

<v-ons-dialog
  cancelable
  v-model:visible="show"
>
  Hi!

  <v-ons-button @click="show = false">
    Close
  </v-ons-button>
</v-ons-dialog>

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 v-model directive can also be used.

Complex dialogs

The VOnsDialog element can get as complex as we need. It can contain pages or even navigators:

<v-ons-dialog>
  <v-ons-page>
    <v-ons-toolbar>...</v-ons-toolbar>

    ...
  </v-ons-page>
</v-ons-dialog>

関連情報

名前 型 / デフォルト値 概要
animation String ダイアログを表示する際のアニメーション名を指定します。”none”もしくは”default”を指定できます。 Optional.
animationOptions Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: 'ease-in'} Optional.
cancelable Boolean 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 Boolean この属性がある時、ダイアログはdisabled状態になります。 Optional.
maskColor String 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 Optional.
modifier String ダイアログの表現を指定します。 Optional.
visible Boolean 要素が見える場合にtrueOptional.
Name 概要
material マテリアルデザインのダイアログを表示します。
名前 概要
preshow ダイアログが表示される直前に発火します。
postshow ダイアログが表示された直後に発火します。
prehide ダイアログが隠れる直前に発火します。
posthide ダイアログが隠れた後に発火します。
dialogcancel Fired when the dialog is canceled. (翻訳中)
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.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. (翻訳中)

パラメーター
名前 概要
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に記載をお願いいたします。

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