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.
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 |
要素が見える場合にtrue。
Optional.
|
| 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. （翻訳中） |
ダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.dialog | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの表示がキャンセルされます。 |
ダイアログが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.dialog | Object | コンポーネントのオブジェクト。 |
ダイアログが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.dialog | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの非表示がキャンセルされます。 |
ダイアログが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.dialog | Object | コンポーネントのオブジェクト。 |
Fired when the dialog is canceled. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for visible prop.
（翻訳中）
|
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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。