v-ons-modal

画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、 モーダルが表示されている間はイベント通知が行われません。

実例

Using Modal

VOnsModal component covers the entire screen. Underlying components are not subject to any events while the modal component is shown.

This component can be used to block user input while some operation is running or to show some information to the user.

To show or hide a modal the visible prop is used. This also works with v-model:visible.

関連情報

名前 型 / デフォルト値 概要
animation String モーダルを表示する際のアニメーション名を指定します。”none”もしくは”fade”,”lift”を指定できます。 Optional.
animationOptions Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
visible Boolean 要素が見える場合にtrueOptional.
visible Boolean Specify the visibility of the component. (翻訳中) Optional.
名前 概要
preshow モーダルが表示される直前に発火します。
postshow モーダルが表示された直後に発火します。
prehide モーダルが隠れる直前に発火します。
posthide モーダルが隠れた後に発火します。
deviceBackButton Fired on device back button. Default behavior is NOOP. (翻訳中)
preshow

モーダルが表示される直前に発火します。

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

モーダルが表示された直後に発火します。

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

モーダルが隠れる直前に発火します。

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

モーダルが隠れた後に発火します。

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

Fired on device back button. Default behavior is NOOP. (翻訳中)

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

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