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

Updated demos.

Browse Source
This commit is contained in:
euvl
2017-07-31 15:38:01 +01:00
parent 2b35619b64
commit 5023dddebc
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demo/client_side_rendering/src/components/ModesTable.vue
View File

@@ -4,24 +4,26 @@
<td style="width: 20%">Modes:</td>
<td></td>
</tr>
<tr>
<td><b>Simple</b></td>
<td>Yet another boring modal :)</td>
</tr>
<tr>
<td><b>Adaptive</b></td>
<td>Tries to adjust to the page size</td>
<td>Tries to adjust to the page size.</td>
</tr>
<tr>
<td><b>Resizable</b></td>
<td>
Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal.
</td>
</tr>
<tr>
<td><b>Draggable</b></td>
<td>
Allows to drag modal on the screen
Allows to drag modal on the screen.
</td>
</tr>
<tr>
<td><b>Scrollable</b></td>
<td>
If <i>height</i> is set to "auto" - <i>scrollable</i> flag will make your modal... scrollable.
</td>
</tr>
</table>

11
demo/client_side_rendering/src/components/SizeModal.vue
View File

@@ -1,6 +1,7 @@
<template>
<modal name="size-modal"
transition="nice-modal-fade"
classes="demo-modal-class"
:min-width="200"
:min-height="200"
:pivot-y="0.25"
@@ -48,4 +49,14 @@
padding: 10px;
font-style: 13px;
}
.v--modal-overlay[data-modal="size-modal"] {
background: rgba(0, 0, 0, 0.5);
}
.demo-modal-class {
border-radius: 5px;
background: #F7F7F7;
box-shadow: 5px 5px 30px 0px rgba(46,61,73, 0.6);
}
</style>