画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、 モーダルが表示されている間はイベント通知が行われません。
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 |
要素が見える場合にtrue。
Optional.
|
| visible | Boolean | Specify the visibility of the component. （翻訳中） Optional. |
| 名前 | 概要 |
|---|---|
| preshow | モーダルが表示される直前に発火します。 |
| postshow | モーダルが表示された直後に発火します。 |
| prehide | モーダルが隠れる直前に発火します。 |
| posthide | モーダルが隠れた後に発火します。 |
| deviceBackButton | Fired on device back button. Default behavior is NOOP. （翻訳中） |
モーダルが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの表示がキャンセルされます。 |
モーダルが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | コンポーネントのオブジェクト。 |
モーダルが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの非表示がキャンセルされます。 |
モーダルが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.modal | Object | コンポーネントのオブジェクト。 |
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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。