KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Yev Vlasenko
2017-07-24 19:39:09 +01:00
committed by GitHub
parent 44b5301235
commit 788ee03206
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -77,12 +77,13 @@ For full demo please look at `demo/server_side_rendering`
| resizable | false | Boolean | false | If true, allows to resize modal window, keeping it in the center of the screen. | | resizable | false | Boolean | false | If true, allows to resize modal window, keeping it in the center of the screen. |
| adaptive | false | Boolean | false | If true, modal box will try to adapt to the window size | | adaptive | false | Boolean | false | If true, modal box will try to adapt to the window size |
| draggable | false | [Boolean, String]| false | If true, modal box will be draggable. | | draggable | false | [Boolean, String]| false | If true, modal box will be draggable. |
| scrollable | false | Boolean | false | If `height` property is `auto` and the modal height exceeds window height - you will be able to scroll modal |
| reset | false | Boolean | false | Resets position and size before showing modal | | reset | false | Boolean | false | Resets position and size before showing modal |
| clickToClose | false | Boolean | true | If set to `false`, it will not be possible to close modal by clicking on the background | | clickToClose | false | Boolean | true | If set to `false`, it will not be possible to close modal by clicking on the background |
| transition| false | String | | Transition name | | transition| false | String | | Transition name |
| classes | false | [String, Array] | 'vue--modal'| Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied | | classes | false | [String, Array] | 'vue--modal'| Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied |
| width | false | [String, Number] | 600 | Width in pixels or percents (e.g. 50 or "50px", "50%") | | width | false | [String, Number] | 600 | Width in pixels or percents (e.g. 50 or "50px", "50%") |
| height | false | [String, Number] | 300 | Height in pixels or percents (e.g. 50 or "50px", "50%") | | height | false | [String, Number] | 300 | Height in pixels or percents (e.g. 50 or "50px", "50%") or `"auto"` |
| minWidth | false | Number | 0 | The minimum width to which modal can be resized | | minWidth | false | Number | 0 | The minimum width to which modal can be resized |
| minHeight | false | Number | 0 | The minimum height to which modal can be resized | | minHeight | false | Number | 0 | The minimum height to which modal can be resized |
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window | | pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
@@ -140,6 +141,17 @@ And then forbits closing it for the next 5000 ms
### Other ### Other
#### Height: "auto"
From `v1.2.6` height can be set to "auto". If you want to be able to scoll modal content when your it's height exceeds window height - you can set flag `scrollable="true"`.
Example:
```vue
<modal name="foo" height="auto" :scrollable="true">...</modal>
```
#### Close button #### Close button
If you want to have a Close (x) button in the top-right corner, you can use "top-right" slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button. If you want to have a Close (x) button in the top-right corner, you can use "top-right" slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button.