Simple dialogs are defined using the VOnsDialog component.
To show or hide the dialog the visible prop is used.
<v-ons-dialog
cancelable
:visible.sync="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 sync modifier 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>
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| 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. |
| 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をオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: 'ease-in'}
Optional.
|
| visible | Boolean |
要素が見える場合にtrue。
Optional.
|
| visible | Boolean | Specify the visibility of the component. （翻訳中） 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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。