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

Cleaned demo app

Browse Source
This commit is contained in:
euvl
2017-10-25 10:47:13 +01:00
parent 4c3b56d8c7
commit 8048d5e6fe
1 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
demo/client_side_rendering/src/App.vue
View File

@@ -7,7 +7,8 @@
<demo-focus-modal/> <demo-focus-modal/>
<demo-size-modal/> <demo-size-modal/>
<v-dialog @opened="onEveryDialogOpen"/> <v-dialog
@opened="onEveryDialogOpen"/>
<modal name="example-modal" <modal name="example-modal"
transition="nice-modal-fade" transition="nice-modal-fade"
@@ -45,42 +46,61 @@
<modes-table /> <modes-table />
<div style="margin-top: 20px; margin-bottom: 15px;"> <div style="margin-top: 20px; margin-bottom: 15px;">
<button @click="show(false, false, false)">Simple</button> <button
<button @click="show(true, false, false)">Resizable</button> class="btn"
<button @click="show(false, true, false)">Adaptive</button> @click="show(false, false, false)">Simple</button>
<button @click="show(false, false, true)">Draggable</button> <button
class="btn"
@click="show(true, false, false)">Resizable</button>
<button
class="btn"
@click="show(false, true, false)">Adaptive</button>
<button
class="btn"
@click="show(false, false, true)">Draggable</button>
<br> <br>
<button class="green" <button
@click="$modal.show('dog-profile')"> class="btn green"
@click="$modal.show('dog-profile')">
Demo: Dog Profile photo Demo: Dog Profile photo
</button> </button>
<button class="green" <button
@click="$modal.show('error-modal')"> class="btn green"
@click="$modal.show('error-modal')">
Demo: Error handling Demo: Error handling
</button> </button>
<button class="green" <button
@click="$modal.show('demo-login')"> class="btn green"
@click="$modal.show('demo-login')">
Demo: Login Demo: Login
</button> </button>
<button class="green" <button
@click="$modal.show('size-modal')"> class="btn green"
@click="$modal.show('size-modal')">
Demo: Width: 60%, Height: auto Demo: Width: 60%, Height: auto
</button> </button>
<button :class="canBeShown ? 'green' : 'red'" <button
@click="conditionalShow"> :class="canBeShown ? 'btn green' : 'btn red'"
@click="conditionalShow">
Can <b v-if="!canBeShown">NOT</b> be shown Can <b v-if="!canBeShown">NOT</b> be shown
</button> </button>
<br> <br>
<button @click="showBasicDialog"> <button
class="btn"
@click="showBasicDialog">
Dialog: basic Dialog: basic
</button> </button>
<button @click="showTitleDialog"> <button
class="btn"
@click="showTitleDialog">
Dialog: title Dialog: title
</button> </button>
<button @click="showButtonsDialog"> <button
class="btn"
@click="showButtonsDialog">
Dialog: buttons Dialog: buttons
</button> </button>
</div> </div>
@@ -217,7 +237,7 @@ a {
color: inherit; color: inherit;
} }
button { button.btn {
outline: none; outline: none;
background: white; background: white;
border: 0; border: 0;